鼠标滚轮事件未在 Firefox 浏览器中触发答案

【问题标题】：mousewheel event is not triggering in firefox browser鼠标滚轮事件未在 Firefox 浏览器中触发
【发布时间】：2013-05-28 09:51:45
【问题描述】：

请参考以下代码。

$(this.element).on("mousewheel", this.chartMouseWheel);

chartMouseWheel:function(e) {
        if(e.originalEvent.wheelDelta /120 > 0) {
            alert('scrolling up !');
        }
        else{
          alert('scrolling down !');
        }

        if (e.preventDefault)
        e.preventDefault();
        e.returnValue = false;
    },

此事件在 IE、chrome 中正确触发，而在 Firefox 中未触发？

【问题讨论】：

标签： javascript jquery mouseevent

【解决方案1】：

现在是 2017 年，正确答案是：

$(window).on('wheel', function(event){

    // deltaY obviously records vertical scroll, deltaX and deltaZ exist too
    if(event.originalEvent.deltaY < 0){
        // wheeled up
    }
    else {
        // wheeled down
    }
});

适用于当前的 Firefox 51、Chrome 56、IE9+

注意：增量值取决于浏览器和用户设置。

【讨论】：

这很好用，谢谢！我添加了关于大小差异的注释
@charlie 我相信 Firefox 返回的值不是以像素为单位的，并且在任何浏览器中，根据您自己的设置，值可能会有所不同。还有其他关于跨浏览器获取滚动距离的问题。
不幸的是，滚轮的某些用途不涉及滚动，因此检测滚动距离无济于事。
即使页面没有实际滚动，车轮增量（我称之为滚动距离）也不为0。我的意思是你的注释不一定是真的。
@saibbyweb document.onwheel = function(event){ console.log('wheel event'); }

【解决方案2】：

Firefox 从版本 3 开始无法识别“鼠标滚轮”。对于 firefox，您应该使用“DOMMouseScroll”。

检查这个：http://www.javascriptkit.com/javatutors/onmousewheel.shtml

【讨论】：

【解决方案3】：

使用wheel 事件。这个页面还提供了旧浏览器的polyfillshttps://developer.mozilla.org/en-US/docs/Web/Events/wheel

【讨论】：

【解决方案4】：

Badri 是对的，您应该使用“DOMMouseScroll”代替 firefox。除此之外，对于 delta，您需要使用 event.originalEvent.detail 而不是 event.originalEvent.wheelDelta。对于 down，event.originalEvent.detail 给出正值，而 event.originalEvent.wheelDelta 给出负值，反之亦然。

 $(stage.content).on('mousewheel DOMMouseScroll', zoomHelper.zoom);   

 if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
            if (event.originalEvent.detail > 0) {
                //scroll down
                delta = 0.2;
            } else {
                //scroll up
                delta = 0;
            }
        } else {
            if (event.originalEvent.wheelDelta < 0) {
                //scroll down
                delta = 0.2;
            } else {
                //scroll up
                delta = 0;
            }
        }

JSFiddle（适用于 IE 11、Firefox 33 和 Chrome 38，我没有测试其他浏览器）：http://jsfiddle.net/rpaul/ckwu7u86/3/

【讨论】：

不错的解决方案，非常适合我的用例，谢谢！ :)

【解决方案5】：

这似乎在 Safari、Chrome 和 Firefox 中有效（我没有在 IE 中测试过）：

// For Chrome
window.addEventListener('mousewheel', mouseWheelEvent);

// For Firefox
window.addEventListener('DOMMouseScroll', mouseWheelEvent);

function mouseWheelEvent(e) {
  var delta = e.wheelDelta ? e.wheelDelta : -e.detail;
  console.log(delta);
}

发件人：http://www.h3xed.com/programming/javascript-mouse-scroll-wheel-events-in-firefox-and-chrome

【讨论】：

'wheel' 似乎是当今流行的单一事件，请参阅 Louis 的回答

【解决方案6】：

或者只使用jquery-mousewheel jQuery 插件。

【讨论】：

不需要加载这么大的库，因为有一个原生事件，大多数现代浏览器都支持。听mousewheel、wheel 和DOMMouseScroll 就足够了。你可以在// detect available wheel event评论下进一步阅读developer.mozilla.org/en-US/docs/Web/Events/…