事件——鼠标滚轮事件

1.mousewheel事件

  当鼠标滚轮滚动时在页面上触发mousewheel事件,该事件会一直冒泡到window对象上。当鼠标向前滚动时,event.wheelDelta的值为正数,向后滚动时为负数。(谷歌是正负150,Edge、opera是正负120)

2.DOMMouseScroll事件

  这是firefox独有的事件,当鼠标向前滚动时,event.detail的值为-3的倍数,否则为3的倍数。

  DOMMouseScroll事件只能通过事件监听——addeventListener来进行绑定。

一般通过检测正负号来检测鼠标滚轮向前还是向后。

Warining:chrome、Edge、Opera浏览器的mousewheel事件的event.wheelDelta值是滚轮向前滚为正数,向后滚为负数。FireFox则不然,向前为负,向后为正。

 

代码:

var oContent=document.getElementById("content");
        oContent.addEventListener("mousewheel",(event)=>{
            alert(event.wheelDelta);
        },false);
        oContent.addEventListener("DOMMouseScroll",(event)=>{
            alert(event.detail);
        },false);

chrome:

事件——鼠标滚轮事件_第1张图片事件——鼠标滚轮事件_第2张图片

 

EDGE:

事件——鼠标滚轮事件_第3张图片事件——鼠标滚轮事件_第4张图片

 

Opera:

事件——鼠标滚轮事件_第5张图片事件——鼠标滚轮事件_第6张图片

 

 

 FireFox:

事件——鼠标滚轮事件_第7张图片事件——鼠标滚轮事件_第8张图片

 

你可能感兴趣的:(事件——鼠标滚轮事件)