Bagaimana untuk menentukan kedudukan tetikus apabila javascript mengklik untuk mencari

JavaScript ialah bahasa pengaturcaraan yang digunakan secara meluas dalam pembangunan tapak web. Ia boleh membantu pembangun menambah fungsi interaktif dinamik pada tapak web. Dalam pembangunan sebenar, kotak carian dan butang carian adalah elemen penting dalam laman web. Apabila pengguna memasukkan istilah carian dalam kotak input dan mengklik butang carian, bagaimanakah pengguna harus menentukan kedudukan tetikus? Beberapa pengetahuan dan kemahiran yang berkaitan akan diperkenalkan di bawah.

1. Pengenalan kepada acara tetikus

Dalam JavaScript, anda boleh menggunakan acara tetikus untuk mendapatkan kedudukan dan jenis acara tetikus dalam penyemak imbas, termasuk acara berikut:

1. klik: Menunjukkan peristiwa yang dicetuskan apabila tetikus diklik, termasuk klik kiri, klik kanan, klik tengah, dsb.
2. turun tetikus: Menunjukkan peristiwa yang dicetuskan apabila butang tetikus ditekan, termasuk tekan butang kiri, tekan butang kanan, tekan butang tengah, dsb.
3. tetikus: Menunjukkan peristiwa yang dicetuskan apabila butang tetikus dilepaskan, termasuk pelepas butang kiri, pelepas butang kanan, pelepas butang tengah, dsb.
4. mousemove: Menunjukkan peristiwa yang dicetuskan apabila tetikus bergerak Ia biasanya digunakan untuk mendapatkan kedudukan tetikus dalam tetingkap penyemak imbas dalam masa nyata.

2. Dapatkan kedudukan tetikus

Selepas pengguna memasukkan istilah carian dalam kotak carian, jika tetikus mengklik butang carian, kedudukan klik tetikus perlu diperolehi. Dalam acara tetikus, kedudukan tetikus dalam pelayar boleh diperolehi melalui objek acara Kod sampel adalah seperti berikut:

document.getElementById('btnSearch').addEventListener('click', function (event) {
  var mouseX = event.clientX;
  var mouseY = event.clientY;
  console.log('鼠标点击坐标：X=' + mouseX + ', Y=' + mouseY);
});

Kod di atas menunjukkan bahawa apabila butang carian diklik, klik. acara didaftarkan melalui fungsi addEventListener , apabila acara dicetuskan, dapatkan sifat clientX dan clientY dalam objek acara, iaitu, kedudukan tetikus dalam tetingkap penyemak imbas, dan kemudian keluarkannya ke konsol.

3 Tentukan kedudukan tetikus

Dalam pembangunan sebenar, jika anda ingin mencari hanya apabila tetikus diklik pada butang carian, anda perlu menentukan sama ada kedudukan tetikus berada dalam butang. kawasan. Untuk melakukan ini, anda perlu mendapatkan koordinat sudut kiri atas dan sudut kanan bawah kawasan di mana butang terletak, dan kemudian tentukan sama ada kedudukan tetikus berada dalam julat ini.

Berikut ialah contoh kod dalam kod, maklumat koordinat kawasan di mana butang terletak pertama kali diperoleh melalui kaedah getBoundingClientRect() dan kemudian maklumat koordinat apabila tetikus diklik dibandingkan. dengan maklumat koordinat kawasan butang untuk menentukan sama ada tetikus berada dalam julat butang:

document.getElementById('btnSearch').addEventListener('mousedown', function (event) {
  var mouseX = event.clientX;
  var mouseY = event.clientY;  
  var button = document.getElementById('btnSearch');
  var rect = button.getBoundingClientRect();
  var x1 = rect.left;
  var y1 = rect.top;
  var x2 = rect.right;
  var y2 = rect.bottom;
  
  if (mouseX >= x1 && mouseX <= x2 && mouseY >= y1 && mouseY <= y2) {
    console.log('搜索开始');
    // 执行搜索操作
  } else {
    console.log('鼠标不在按钮范围内');
  }
});

Dalam kod di atas, objek DOM butang pertama kali diperoleh, dan kemudian maklumat koordinat bagi kawasan di mana butang terletak diperolehi melalui kaedah getBoundingClientRect(), termasuk koordinat sudut kiri atas dan sudut kanan bawah. Berdasarkan maklumat koordinat ini, maklumat kedudukan julat butang boleh dikira, dan kemudian ditentukan sama ada kedudukan tetikus berada dalam julat butang.

4. Kesimpulan

Melalui pengenalan di atas, kita dapat melihat bahawa dalam JavaScript, maklumat kedudukan tetikus boleh diperolehi dengan mudah melalui peristiwa tetikus, termasuk kedudukan tetikus dalam pelayar, The kedudukan klik tetikus, dsb. Pada masa yang sama, kita juga boleh mendapatkan maklumat koordinat elemen untuk menentukan sama ada kedudukan tetikus berada dalam julat elemen untuk mencapai kesan interaksi yang lebih tepat.

Atas ialah kandungan terperinci Bagaimana untuk menentukan kedudukan tetikus apabila javascript mengklik untuk mencari. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!