cari

Rumah  >  Artikel  >  hujung hadapan web  >  Javascript melaksanakan kemahiran event_javascript roda tetikus melumpuhkan

Javascript melaksanakan kemahiran event_javascript roda tetikus melumpuhkan

WBOY
WBOYasal
2016-05-16 15:49:191960semak imbas

Kami biasanya melaraskan keserasian versi IE yang lebih rendah apabila melibatkan perkara yang serasi, tetapi kali ini ia bukan kerana versi penyemak imbas yang lebih rendah tidak cekap. Ini kerana Firefox telah pergi terlalu jauh dan langsung tidak menghiraukan pengalaman pelayar lain. Semua pelayar kecuali Firefox boleh menggunakan acara MouseWheel untuk mengendalikan tindak balas roda tetikus. Walau bagaimanapun, Firefox tidak menyokong MouseWheel, dan menggunakan DOMMouseScroll yang tidak masuk akal, yang tidak serasi dengan pelayar lain kecuali Firefox. Dalam erti kata lain, untuk mengendalikan acara roda tetikus, Firefox hanya boleh menggunakan DOMMouseScroll. Bukan Firefox hanya boleh menggunakan MouseWheel. Prinsip kedua-dua peristiwa ini berbeza, dan data yang diproses juga berbeza. 

var firefox = navigator.userAgent.indexOf('Firefox') != -1;
firefox ? img.addEventListener('DOMMouseScroll', MouseWheel, false) : 
     (img.onmousewheel = MouseWheel);
 
  function MouseWheel(e) {
    e = e || window.event;
 
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
     
    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
 
  }

Mari kita lihat kod lengkap

<!DOCTYPE html>
<style>
span {font:14px/20px 微软雅黑;}
#counter {
 width:50px;height:20px;
 border:1px solid #CCC;
 background:#F9F9F9;
 font:14px/20px Consolas;
 text-align:center;
 margin:10px;
}
</style>
<span>使用鼠标滚轮调整数值大小</span><br/>
<div id="counter">0</div>
<script>
//判断浏览器
var isIE=navigator.userAgent.match(/MSIE (\d)/i);
isIE=isIE&#63;isIE[1]:undefined;
var isFF=/FireFox/i.test(navigator.userAgent);
//获取元素
var counter=document.getElementById("counter");
//鼠标滚轮事件
if(isIE<9) //传统浏览器使用MouseWheel事件
 counter.attachEvent("onmousewheel",function(){
  //计算鼠标滚轮滚动的距离
  //一格3行，每行40像素，所以除以120
  var v=event.wheelDelta/120;
  counter.innerHTML=counter.innerHTML*1+v;
  //阻止浏览器默认方法
  return false;
 });
else if(!isFF) //除火狐外的现代浏览器也使用MouseWheel事件
 counter.addEventListener("mousewheel",function(e){
  //计算鼠标滚轮滚动的距离
  var v=e.wheelDelta/120;
  counter.innerHTML=counter.innerHTML*1+v;
  //阻止浏览器默认方法
  e.preventDefault();
 },false);
else //奇葩的火狐使用DOMMouseScroll事件
 counter.addEventListener("DOMMouseScroll",function(e){
  //计算鼠标滚轮滚动的距离
  //一格是3行，但是要注意，这里和像素不同的是它是负值
  var v=-e.detail/3;
  counter.innerHTML=counter.innerHTML*1+v;
  //阻止浏览器默认方法
  e.preventDefault();
 },false);
</script>

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

Kenyataan：
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
Artikel sebelumnya：js untuk menyusun kemahiran aksara Cina_javascriptArtikel seterusnya：js untuk menyusun kemahiran aksara Cina_javascript

Artikel berkaitan

Lihat lagi