在现代浏览器中的鼠标滚轮事件

我希望为mousewheel事件提供干净漂亮的JavaScript，只支持最新版本的常见浏览器，而无需旧版本的遗留代码，无需任何JS框架。在现代浏览器中的鼠标滚轮事件

Mousewheel事件很好地解释了here。如何为当前最新版本的浏览器简化它？

我无法访问所有浏览器来测试它，所以caniuse.com对我来说是一个很大的帮助。唉，那里没有提到鼠标轮。

根据德里克的评论，我写了这个解决方案。它适用于所有浏览器吗？

someObject.addEventListener("onwheel" in document ? "wheel" : "mousewheel", function(e) { 
    e.wheel = e.deltaY ? -e.deltaY : e.wheelDelta/40; 
    // custom code 
});

来源

2013-02-17 Jan Turoň

Chrome和IE支持['MouseWheelEvent']（https://developer.mozilla.org/en-US/docs/DOM/MouseWheelEvent），而Firefox支持['WheelEvent']（https：//开头developer.mozilla.org/en-US/docs/DOM/WheelEvent）。要通过浏览器进行收听，请参见[这里]（https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/wheel#Listening_to_this_event_across_browser）。 – 2013-02-17 21:42:56

*“它适用于所有浏览器？”*。你不能自己测试吗？ – 2013-02-17 22:46:19

加入德里克的观点。在这些情况下，您应该真正评估浏览器兼容性。你可以用Modernizr（http://www.modernizr.com）来做到这一点。它会让你的生活变得更轻松:) – 2013-02-17 22:49:36

下面是介绍这方面的文章，并给出了一个例子：

http://www.sitepoint.com/html5-javascript-mouse-wheel/

相关代码，减去具体的例子调整图像大小的给定：

var myitem = document.getElementById("myItem"); 
if (myitem.addEventListener) 
{ 
    // IE9, Chrome, Safari, Opera 
    myitem.addEventListener("mousewheel", MouseWheelHandler, false); 
    // Firefox 
    myitem.addEventListener("DOMMouseScroll", MouseWheelHandler, false); 
} 
// IE 6/7/8 
else 
{ 
    myitem.attachEvent("onmousewheel", MouseWheelHandler); 
} 

function MouseWheelHandler(e) 
{ 
    // cross-browser wheel delta 
    var e = window.event || e; // old IE support 
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); 

    return false; 
}

来源

2014-09-26 20:27:42 Almo

优秀的答案。需要更多的关注。在这个问题上的许多不完整的答案， – Terrance00 2017-02-07 06:16:55

鼠标滚轮事件是非标准的，MDN recommend wheel event。

var item = document.getElementById('item') 
item.addEventListener('mousewheel', function(e) { 
    console.log('event', e) 
}, false)

来源

2017-03-09 19:54:00

在现代浏览器中的鼠标滚轮事件

回答

相关问题