Artikel ini terutama memperkenalkan informasi relevan tentang menonaktifkan peristiwa roda mouse di JavaScript. Teman yang membutuhkan dapat merujuknya.
Kami biasanya menyesuaikan kompatibilitas versi IE yang lebih rendah jika menyangkut hal-hal yang kompatibel, tetapi kali ini bukan karena versi browser yang lebih rendah tidak kompeten. Itu karena Firefox sudah bertindak terlalu jauh dan sama sekali mengabaikan pengalaman browser lain. Semua browser kecuali Firefox dapat menggunakan event MouseWheel untuk menangani respon roda mouse. Namun, Firefox tidak mendukung MouseWheel, dan menggunakan DOMMouseScroll yang tidak masuk akal, yang tidak kompatibel dengan browser lain kecuali Firefox. Dengan kata lain, untuk menangani event roda mouse, Firefox hanya bisa menggunakan DOMMouseScroll. Non-Firefox hanya bisa menggunakan MouseWheel. Prinsip kedua peristiwa ini berbeda, dan data yang diolahnya juga berbeda.
- varfirefox=navigator.userAgent.indexOf('Firefox')!=-1;
- firefox?img.addEventListener('DOMMouseScroll',MouseWheel,false):
- (img.onmousewheel=Roda Mouse);
- fungsiRoda Tikus(e){
- e=e||jendela.acara;
- if(e.stopPropagation)e.stopPropagation();
- elsee.cancelBubble=benar;
- if(e.preventDefault)e.preventDefault();
- elsee.returnValue=false;
- }
Mari kita lihat kode lengkapnya
- <!DOCTYPEhtml>
- <gaya>
- span{font:14px/20pxMicrosoft Yahei;}
- #menangkal{
- lebar:50px;tinggi:20px;
- batas:1pxsolid#CCC;
- latar belakang:#F9F9F9;
- font:14px/20pxConsolas;
- perataan teks:tengah;
- margin:10 piksel;
- }
- </gaya>
- <span>Gunakan roda mouse untuk menyesuaikan nilainya</span><br/>
- <divid=penghitung>0</div>
- <skrip>
- //Menilai browser
- varisIE=navigator.userAgent.match(/MSIE(/d)/i);
- isIE=isIE?isIE[1]:tidak terdefinisi;
- varisFF=/FireFox/i.test(navigator.userAgent);
- //Dapatkan elemen
- varcounter=document.getElementById(penghitung);
- //Acara roda mouse
- if(isIE<9)//Browser tradisional menggunakan acara MouseWheel
- counter.attachEvent(onmousewheel,function(){
- //Hitung jarak gulir roda mouse
- //Satu grid mempunyai 3 garis, tiap baris mempunyai 40 piksel, jadi bagilah dengan 120
- varv=event.wheelDelta/120;
- counter.innerHTML=counter.innerHTML*1+v;
- //Blokir metode default browser
- kembali salah;
- });
- elseif(!isFF)//Browser modern kecuali Firefox juga menggunakan event MouseWheel
- counter.addEventListener(roda mouse,fungsi(e){
- //Hitung jarak gulir roda mouse
- varv=e.wheelDelta/120;
- counter.innerHTML=counter.innerHTML*1+v;
- //Blokir metode default browser
- e.preventDefault();
- },PALSU);
- lain//Firefox yang aneh menggunakan acara DOMMouseScroll
- counter.addEventListener(DOMMouseScroll,fungsi(e){
- //Hitung jarak gulir roda mouse
- //Satu grid terdiri dari 3 garis, namun perlu diketahui bahwa perbedaannya dengan piksel adalah nilai negatifnya
- varv=-e.detail/3;
- counter.innerHTML=counter.innerHTML*1+v;
- //Blokir metode default browser
- e.preventDefault();
- },PALSU);
- </skrip>
Di atas adalah keseluruhan isi artikel ini, saya harap Anda semua menyukainya.