Screeney
Offset mouse dari sudut kiri atas layar monitor
pageey
Offset mouse dari sudut kiri atas halaman (nilainya tidak akan dipengaruhi oleh bilah gulir)
Properti ini tidak didukung berdasarkan IE9
Tetapi Anda dapat menulis beberapa kode untuk menghitungnya. Implementasi di jQuery:
Salinan kode adalah sebagai berikut:
// Hitung PageX/Y jika hilang dan klien/y tersedia
if (event.pagex == null && original.clientx! = null) {
eventDoc = event.target.OwnerDocument || dokumen;
DOC = EventDoc.DocumentElement;
body = 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);
}
Iklementasikan saja.
Offset mouse relatif terhadap viewport browser ditambah ketinggian tersembunyi dari scrollbar dokumen dikurangi clienttop dokumen.
Salinan kode adalah sebagai berikut:
var pagey = event.clienty +document.documentElement. scrolltop-document.documentelement.clienttop
Mengapa Mengurangi Dokumen.DocumentElement.Clienttop
Ini adalah offset dari dokumen khusus browser di bawah IE8. Bahkan jika HTML diatur ke 0, bantalan dan margin tubuh tidak akan mempengaruhi nilainya.
Diuji di bawah IE7, dapatkan
Salinan kode adalah sebagai berikut:
document.documentelement.clienttop -> 2px document.documentelement.clientleft -> 2px
document.bocy.clienttop -> 0px document.body.clientleft -> 0px
klien
Offset tikus dari sudut kiri atas viewport browser
Perhatikan perbedaan antara klien dan pagey. Nilai Clienty setara dengan Pagey ketika tidak ada bilah gulir pada halaman.
---------------------------------- Segmentasi -------------------------------------------
lapisan
Jika gaya posisi elemen bukan statis default, kami mengatakan bahwa elemen ini memiliki atribut penentuan posisi.
Temukan elemen terdekat dengan atribut penentuan posisi dalam elemen yang saat ini memicu peristiwa mouse dan elemen leluhurnya, hitung nilai offset mouse dari itu untuk menemukan titik diplomatik di sudut kiri atas perbatasan elemen sebagai titik relatif. Jika elemen dengan atribut penentuan posisi tidak dapat ditemukan, maka offset dihitung relatif terhadap halaman saat ini, yang setara dengan pagey saat ini.
Atribut ini tidak didukung di bawah IE9, tetapi dapat diganti dengan offsety uniknya.
offsety
Properti khusus yaitu
Perbedaan antara offsety dan lapisan adalah bahwa ketika menghitung nilai offset, yang pertama relatif terhadap titik persimpangan bagian dalam di sudut kiri atas perbatasan elemen. Oleh karena itu, ketika mouse berada di perbatasan elemen, nilai offset adalah nilai negatif. Selain itu, offsety tidak peduli apakah elemen yang memicu acara tersebut memiliki atribut penentuan posisi. Itu selalu menghitung nilai offset relatif terhadap elemen yang memicu acara.
Mengingat perbedaan antara lapisan dan offsety, Anda harus memperhatikan penggunaan dua yang kompatibel.
1. Elemen yang memicu acara tersebut harus mengatur atribut penentuan posisi.
2. Ketika elemen memiliki batas perbatasan atas, lapisan memiliki satu nilai lebar perbatasan lebih dari nilai offsety.
Salinan kode adalah sebagai berikut:
// elemen.bordertopwidth di sini harus ada lebar perbatasan atas dari elemen yang benar -benar dihitung.
var borderTopWidth = window.getComputedStyle? window.getComputedStyle (elemen, null) .bordertopwidth: element.currentstyle.bordertopwidth;
var offsety = event.offsety || (event.layery + borderEtopWidth);
Melalui sifat lapisan dan offsety, sangat nyaman untuk menghitung offset mouse relatif terhadap elemen peristiwa mouse terikat, yang sangat berguna pada beberapa waktu.
Di sini kita berbicara tentang atribut offset dari arah vertikal mouse. Offset dalam arah horizontal serupa, jadi kami tidak akan membahasnya lagi.
Di atas adalah semua tentang artikel ini, saya harap Anda menyukainya.