Penjelasan terperinci tentang atribut screenY, pageY, clientY, layerY, offsetY bagi acara tetikus_kemahiran javascript

skrinY

Offset tetikus berbanding penjuru kiri sebelah atas skrin monitor

halamanY

Offset tetikus berbanding penjuru kiri sebelah atas halaman (nilainya tidak akan dipengaruhi oleh bar skrol)

Atribut ini tidak disokong di bawah IE9

Tetapi anda boleh menulis beberapa kod untuk mengiranya. Pelaksanaan dalam jQuery:

Salin kod Kod adalah seperti berikut:

//Kira pageX/Y jika tiada dan clientX/Y tersedia
jika ( event.pageX == null && original.clientX != null ) {
EventDoc = event.target.ownerDocument || doc = eventDoc.documentElement;
Badan = eventDoc.body;
Event.pageX = original.clientX ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft||body&&body.clientLeft || 0 );
Event.pageY = original.clientY ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 );
} 

Permudahkan sahaja.

Imbang tetikus berbanding dengan port pandangan penyemak imbas ditambah ketinggian tersembunyi bar skrol dokumen tolak klienTop dokumen.

Salin kod Kod adalah seperti berikut:

var pageY = event.clientY document.documentElement scrollTop-document.documentElement.clientTop

Kenapa tolak document.documentElement.clientTop

Ini ialah offset bagi dokumen yang unik untuk penyemak imbas di bawah IE8 Walaupun padding dan margin html dan badan ditetapkan kepada 0, nilainya tidak akan terjejas.

Diuji di bawah iE7 dan mendapat                               

Salin kod Kod adalah seperti berikut:

document.documentElement.clientTop --> 2px document.documentElement.clientLeft --> document.bocy.clientTop --> 0px document.body.clientLeft -->

klienY

Offset tetikus berbanding penjuru kiri sebelah atas port pandangan penyemak imbas

Perhatikan perbezaan antara pelanggan dan pagey, nilai Pelanggan adalah bersamaan dengan Pagey

apabila tiada bar bergulir pada halaman.

----------------------------------Berpisah---------- -- --------------------------------

lapisanY

Jika gaya kedudukan elemen bukan statik lalai, kami katakan bahawa elemen ini mempunyai atribut kedudukan.

Cari elemen terdekat dengan atribut kedudukan antara elemen yang pada masa ini mencetuskan peristiwa tetikus dan elemen moyangnya, hitung nilai mengimbangi tetikus kepadanya dan cari titik diplomatik sudut kiri atas sempadan elemen sebagai titik relatif. Jika elemen dengan atribut kedudukan tidak ditemui, offset dikira secara relatif kepada halaman semasa, yang bersamaan dengan pageY.

Atribut ini tidak disokong di bawah IE9, tetapi ia boleh digantikan dengan offsetY uniknya

offsetY

Sifat khusus IE

Perbezaan antara offsetY dan layerY ialah apabila mengira nilai offset bekas, ia adalah relatif kepada titik persilangan dalam penjuru kiri atas sempadan elemen Oleh itu, apabila tetikus berada pada sempadan elemen, nilai offset ialah nilai negatif. Selain itu, offsetY tidak peduli sama ada elemen yang mencetuskan peristiwa mempunyai atribut kedudukan Ia sentiasa mengira nilai offset berbanding dengan elemen yang mencetuskan peristiwa.

Memandangkan perbezaan antara layerY dan offsetY, anda mesti memberi perhatian untuk menggunakannya secara serasi

1. Elemen yang mencetuskan peristiwa mesti menetapkan atribut kedudukan.

​ ​ 2. Apabila elemen mempunyai bahagian atas sempadan, layerY mempunyai satu lagi nilai lebar atas sempadan daripada nilai offsetY.

Salin kod Kod adalah seperti berikut:

//elemen.borderTopWidth di sini mestilah lebar sempadan atas elemen yang dikira sebenar.
var borderTopWidth = window.getComputedStyle ? window.getComputedStyle(elemen,null).borderTopWidth: element.currentStyle.borderTopWidth
; var offsetY = event.offsetY||(event.layerY borderTopWidth);

Melalui atribut layerY dan offsetY, anda boleh mengira dengan mudah offset tetikus berbanding elemen yang terikat pada acara tetikus, yang sangat berguna pada masa tertentu. 

Sifat offset tetikus dalam arah menegak diterangkan secara terperinci di sini Sifat offset dalam arah mendatar adalah serupa dan tidak akan dibincangkan lagi.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.