Rumah > hujung hadapan web > tutorial js > Acara tatal takal mengikat JS asli serasi dengan kemahiran browsers_javascript biasa

Acara tatal takal mengikat JS asli serasi dengan kemahiran browsers_javascript biasa

WBOY
Lepaskan: 2016-05-16 16:42:51
asal
1598 orang telah melayarinya

Peristiwa halaman tatal roda ditemui dalam kesan khas halaman web, tetapi kaedah pelaksanaan berbeza dalam penyemak imbas yang berbeza. Kaedah yang saya laksanakan di bawah adalah serasi dengan pelayar biasa.

function getData(event){ 
var e = event || window.event; 
//获取滚动距离(FF每次滚动 data为3或者-3,其他为120或者-120) 
var data = e.detail || e.wheelDelta; 
alert(data); 
} 

//IE之外的绑定事件方法 
if(document.addEventListener && !document.attachEvent) 
{ 
document.addEventListener('mousewheel',getData); 
//FF绑定滚动事件 
document.addEventListener('DOMMouseScroll',getData); 
} 
//IE 
else if(document.attachEvent && !document.addEventListener){ 
document.attachEvent('onmousewheel',getData); 
}else{ 
window.onmousewheel = getData; 
}
Salin selepas log masuk

Tempat yang patut diberi perhatian dalam kod:

1 Mengapa menggunakan document.addEventListener && !document.attachEvent untuk membezakan IE?

attachEvent dan detachEvent ialah kaedah khusus IE untuk acara mengikat dan acara tidak mengikat Kaedah ini hanya wujud dalam IE. Walau bagaimanapun, dalam pelayar IE9, kaedah addEventListener yang lebih umum dilaksanakan untuk mengikat acara. Jika terdapat kaedah document.addEventListener dalam penyemak imbas, anda boleh mengecualikan versi yang bukan IE8 dan ke bawah, tetapi menyertakan penyemak imbas IE9, jadi gunakan &&!document.attachEvent kemudian untuk mengecualikan penyemak imbas IE9.

2 Perlu diingat bahawa tiada acara roda tetikus dalam penyemak imbas FF, dan masa untuk mencetuskan penatalan ialah DOMMouseScroll.

3 Perkara lain yang perlu diberi perhatian ialah apabila menggunakan addEventListener untuk mengikat acara, on tidak ditambahkan di hadapan nama acara, tetapi apabila menggunakan attachEvent untuk mengikat acara dalam IE, on diperlukan.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan