Ringkasan untuk mendapatkan atribut berkaitan kedudukan tetikus dalam kemahiran JavaScript_javascript

Javascript tidak mempunyai objek tetikus untuk mendapatkan koordinat tetikus bergantung pada objek acara yang berkuasa.

Dengan memantau pergerakan tetikus dokumen, kita boleh mendapatkan kedudukan tetikus dalam masa nyata.

Tetapi! ! Terdapat terlalu banyak atribut berkaitan tetikus dalam acara itu, yang sangat mengelirukan! Seperti berikut:

event.layerX	event.layerY
event.clientX	event.clientY
event.pageX	event.pageY
event.offsetX	event.offsetY
event.screenX	event.screenY
event.x	event.y

6 kumpulan kesemuanya!

Dan perbezaan antara mereka tidak jelas, dan penyemak imbas tidak serasi!

Tujuan artikel ini adalah untuk menjelaskan perbezaan mereka dan memilih yang tidak disyorkan.

Kod ujian

Jalankan kod berikut secara terus:

Salin kod Kod adalah seperti berikut:

http://www.w3.org/1999/xhtml"> />

badan {kedudukan:relatif;}
div {min-height: 300px; background-color: #eee;}
#jg {kanan: 0; kedudukan atas: 10px;

Tunjukkan hasil

Div dalam skrin

Tinggi dan lebar. . .

div luar skrin

var jg = document.getElementById('jg');
document.onmousemove = fungsi (e) {
e = e ||. window.event;
jg.innerHTML = 'layerX:' e.layerX
',layerY:' e.layerY
',
clientX:' e.clientX
',clientY:' e.clientY
',
pageX:' e.pageX
',halamanY :' e.halamanY
',
offsetX:' e.offsetX
',offsetY:' e.offsetY
',
screenX:' e.screenX
',screenY:' e.screenY
',
x:' e.x
',y:' e.y;
}

Semasa proses ujian, satu artifak ditemui: chrome (pelayar Google) dan IE9 serasi sepenuhnya dengan semua atribut di atas! Ia sangat mudah untuk membandingkan mereka.

Selepas perbandingan, keputusan adalah seperti berikut:

Penjelasan setiap atribut

clientX dan Y ialah koordinat tetikus berbanding dengan port pandangan penyemak imbas (iaitu bahagian di luar bar skrol diabaikan semua pelayar menyokongnya);

ScreenX dan Y ialah koordinat tetikus berbanding bahagian kiri (tepi atas) keseluruhan skrin.

offsetX dan Y ialah koordinat tetikus berbanding objek yang ditunjuk pada masa ini. Jika tetikus menghala ke butang, offsetX adalah relatif kepada butang firefox tidak menyokong

x dan y adalah sama dengan layerX dan Y dalam penyemak imbas standard Ia adalah atribut yang boleh digunakan untuk menggantikan layerX dalam IE

pageX dan Y ialah koordinat tetikus berbanding dengan bahagian kiri (tepi atas) keseluruhan halaman, termasuk yang di luar port pandangan IE7 dan 8 tidak menyokongnya.

Isi penting: layerX dan layerY

LayerX dan Y ialah atribut baharu yang diperkenalkan oleh penyemak imbas standard dan turut disokong oleh IE9. Ia boleh digunakan untuk menggantikan offsetX dan Y. Walau bagaimanapun, ia ditakrifkan sebagai: koordinat unsur terdekat dengan maklumat penentududukan berbanding dengan elemen penunjuk pada masa ini. "dengan kedudukan" ini bermakna terdapat atribut css yang tidak diletakkan secara lalai (iaitu, bukan statik).

Jika elemen yang ditunjuk pada masa ini diposisikan, maka layerX dan Y akan mengembalikan koordinat berbanding elemen ini, jika tidak, semak tag induk elemen ini, jika masih tiada kedudukan, teruskan; —— nod html.

Jadi, dalam Firefox, jika anda mahukan nilai offsetX, anda mesti menambah maklumat kedudukan kedudukan!

Ringkasan keserasian:

1. Firefox tidak menyokong atribut offsetX, offsetY dan x, y, tetapi ia boleh digantikan dengan layerX
2. x dan y dalam ie adalah bersamaan dengan layerX dan layerY dalam firefox&chrome; 3. Terdapat jarak 2px antara sempadan dokumen IE7 dan 8 dan sempadan tetingkap penyemak imbas, jadi apabila tetingkap dimaksimumkan, skrinX minimum ialah 2px
; 4. Walaupun layerX dan Y dalam ie9 mempunyai nilai, ia tidak dapat diterangkan dengan betul. Ia seolah-olah berkaitan dengan tag html Contohnya, dalam kod contoh saya, seret bar skrol ke kanan dan perlahan-lahan gerakkan tetikus ruang kosong ke DIV besar Pada masa ini, perbezaan antara bahagian paling kanan DIV besar dan bahagian paling kanan DIV pertama juga akan dikira ke dalam lapisanX. . . Memandangkan semakin banyak elemen pada akhirnya, pengiraan ini menjadi lebih rumit, bagaimanapun, firefox dan layerX chrome tidak mempunyai masalah ini. Jadi, jangan gunakan layerX dalam IE9.
5. Dalam chrome, walaupun x dan y mempunyai nilai, ia betul-betul sama seperti clientX dan Y! Oleh itu, tidak digalakkan untuk menggunakan atribut x,y.

Pemulihan Keserasian

Dalam pelayar standard, kedudukan dan event.layerX boleh digunakan untuk melaksanakan atribut event.offsetX

Tiada pageX, pageY dalam IE7 dan 8. Anda hanya boleh menggunakan document.documentElement.scrollLeft event.clientX untuk mencarinya.

Jadi, salah satu daripada x, y atau offsetX, offsetY dalam IE boleh dialih keluar.