Penjelasan terperinci tentang kemahiran js mendapatkan kedudukan tetikus example_javascript

Contoh dalam artikel ini menerangkan kaedah mendapatkan kedudukan tetikus dalam js. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Menggunakan javascript untuk mendapatkan kedudukan tetikus (kursor) pada halaman semasa digunakan dalam banyak situasi, seperti seret dan lepas, petua alat, dsb. Sudah tentu, kami masih perlu menghadapi masalah keserasian penyemak imbas di sini Pelayar yang berbeza mengendalikan atribut berkaitan ini secara berbeza Berikut ialah pengenalan terperinci kepada perbezaan dan penyelesaian akhir apabila penyemak imbas mengendalikan atribut ini.

Kod JavaScript adalah seperti berikut:

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function mousePosition(ev){
if(ev.pageX || ev.pageY){
return {x:ev.pageX, y:ev.pageY};
}
return {
x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y:ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
</script>

Cara menggunakan:

document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
}

Penerangan terperinci kod adalah seperti berikut:

Kita mesti mengisytiharkan objek evnet terlebih dahulu Tanpa mengira pergerakan, klik, tekan kekunci, dsb., evnet akan diaktifkan Dalam Internet Explorer, acara ialah pembolehubah global dan akan disimpan dalam window.event. Dalam firefox atau pelayar lain, acara akan diperolehi oleh fungsi yang sepadan. Apabila kami menetapkan fungsi mouseMove kepada document.onmousemove, mouseMove akan mendapat acara pergerakan tetikus.

Untuk membolehkan ev mendapatkan acara acara dalam semua penyemak imbas, "||window.event" tidak akan berfungsi di bawah Firefox kerana ev sudah mempunyai nilai yang ditetapkan. Dalam MSIE ev kosong, jadi anda mendapat window.event .

Oleh kerana kami perlu mendapatkan kedudukan tetikus beberapa kali dalam artikel ini, kami mereka bentuk fungsi MousePosition, yang mengandungi satu parameter: peristiwa.

Oleh kerana kami akan berjalan di bawah MSIE dan penyemak imbas lain, Firefox dan penyemak imbas lain menggunakan event.pageX dan event.pageY untuk mewakili kedudukan tetikus berbanding dokumen Jika anda mempunyai tetingkap 500*500 dan tetikus anda berada dalam Benar-benar di tengah, maka nilai pageX dan pageY adalah 250, dan jika anda menatal ke bawah 500, maka pageY akan menjadi 750.

MSIE adalah sebaliknya Ia menggunakan event.clientX dan event.clientY untuk menunjukkan bahawa tetikus adalah bersamaan dengan kedudukan tetingkap, bukan dokumen. Dalam contoh yang sama, jika anda menatal ke bawah 500, clientY masih 250, jadi kami perlu menambah sifat scrollLeft dan scrollTop berbanding dokumen. Akhir sekali, dokumen dalam MSIE tidak bermula pada 0,0, tetapi biasanya mempunyai sempadan kecil (biasanya 2 piksel Saiz sempadan ditentukan dalam document.body.clientLeft dan clientTop.

Kod lengkap:

<script type="text/javascript">
// 说明：获取鼠标位置
// 整理：http://www.codebit.cn
// 来源：http://www.webreference.com
function mousePosition(ev){
   if(ev.pageX || ev.pageY){
     return {x:ev.pageX, y:ev.pageY};
   }
   return {
     x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
     y:ev.clientY + document.body.scrollTop - document.body.clientTop
   };
}
document.onmousemove = mouseMove;
function mouseMove(ev){
 ev = ev || window.event;
 var mousePos = mousePosition(ev);
   document.getElementByIdx('mouseXPosition').value = mousePos.x;
   document.getElementByIdx('mouseYPosition').value = mousePos.y;
}
</script>

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.