Pelbagai kaedah untuk mendapatkan kedudukan tetikus berdasarkan kemahiran JavaScript_javascript

Dalam sesetengah operasi DOM, kami sering berurusan dengan kedudukan elemen interaksi tetikus adalah aspek yang sering digunakan beberapa ringkasan ringkas untuk mendapatkan koordinat kedudukan klik tetikus Tiada pernyataan khas bahawa kod itu diuji dan serasi di bawah IE8, FireFox dan Chrome
.

Koordinat kedudukan klik tetikus

berbanding dengan skrin

Jika ia melibatkan klik tetikus untuk menentukan kedudukan, ia adalah agak mudah Selepas mendapatkan peristiwa klik tetikus, peristiwa screenX dan screenY memperoleh kedudukan klik berbanding dengan margin kiri dan atas skrin tidak dipertimbangkan. Pelayar yang berbeza Prestasinya agak konsisten.

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.screenX,'y':screenY}
    } 

Berkaitan dengan tetingkap penyemak imbas

Kod mudah boleh dilaksanakan, tetapi ini tidak mencukupi, kerana dalam kebanyakan kes kita ingin mendapatkan koordinat kedudukan klik tetikus berbanding tetingkap penyemak imbas Atribut clientX dan clientY bagi acara tersebut masing-masing mewakili koordinat kedudukan klik tetikus berbanding dengan dokumen Jidar kiri, jidar atas. Jadi begitu juga kami menulis kod seperti ini

function getMousePos(event) {
      var e = event || window.event;
      return {'x':e.clientX,'y':clientY}
    } 

Dokumen Relatif

Tiada masalah dengan ujian mudah, tetapi clientX dan clientY memperoleh koordinat berbanding skrin semasa, mengabaikan faktor menatal halaman Ini berguna dalam banyak keadaan, tetapi apabila kita perlu mempertimbangkan penatalan halaman, iaitu, berbanding dengan dokumen ( Apakah yang perlu saya lakukan jika koordinat unsur badan) ditentukan? Cuma tambahkan anjakan penatalan Seterusnya kita cuba mengira anjakan penatalan halaman.

Malah, masalahnya akan menjadi lebih mudah di bawah Firefox, kerana Firefox menyokong atribut pageX dan pageY Kedua-dua atribut ini sudah mengambil kira penatalan halaman.

Dalam Chrome, anda boleh mengira anjakan tatal halaman melalui document.body.scrollLeft dan document.body.scrollTop, manakala dalam IE, anda boleh mengira anjakan tatal halaman melalui document.documentElement.scrollLeft dan document.documentElement.scrollTop

function getMousePos(event) {
      var e = event || window.event;
      var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
      var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
      var x = e.pageX || e.clientX + scrollX;
      var y = e.pageY || e.clientY + scrollY;
      //alert('x: ' + x + '\ny: ' + y);
      return { 'x': x, 'y': y };
    } 

Kandungan di atas adalah pelbagai kaedah untuk mendapatkan kedudukan tetikus berdasarkan JavaScript yang diperkenalkan oleh editor saya harap anda menyukainya.