现代浏览器中的鼠标滚轮事件 [英] Mousewheel event in modern browsers

问题描述

我想为mousewheel事件提供干净漂亮的JavaScript，只支持最新版本的常见浏览器，而不使用旧版本的旧代码，没有任何JS框架。

I'd like to have clean and nice JavaScript for mousewheel event, supporting only the latest version of common browsers without legacy code for obsolete versions, without any JS framework.

鼠标滚轮事件很好地解释了这里。如何为当前最新版本的浏览器简化它？

Mousewheel event is nicely explained here. How to simplify it for the current latest versions of the browsers?

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

I don't have access to all browsers to test it, so caniuse.com is a great help to me. Alas, mousewheel is not mentioned there.

根据Derek的评论，我写了这个解决方案。它对所有浏览器都有效吗？

Based on Derek's comment, I wrote this solution. Is it valid for all browsers?

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

推荐答案

这是一篇描述这个的文章，并给出了一个例子：

Here's an article that describes this, and gives an example:

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

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

Relevant code, minus the specific example given of resizing an image:

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;
}

这篇关于现代浏览器中的鼠标滚轮事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！