鼠标滚轮事件在火狐浏览器中无法触发。

Question

请参考以下代码。

$(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中无法触发？

- SivaRajini

Answer 1

现在是2023年，正确答案为：

$(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+。

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

- Louis Ameline

---

非常好，谢谢！我添加了关于数量差异的注释。 - Charlie

@charlie，我相信Firefox返回的值不是以像素为单位的，在任何浏览器中，根据您自己的设置，这些值可能会有所不同。还有其他关于跨浏览器获取滚动距离的SO问题。 - Louis Ameline

我以为你是说其他问题正在使用scrollTop或其他方式来确定滚动距离。 - Charlie

我不知道Stackoverflow是否有关于此的准则，我没有找到任何相关信息，我很好奇。但是SO上确实存在评论功能，所以我倾向于认为它们是供人们使用的。个人而言，我总是使用评论功能，因为我认为它们通常非常有价值。至少回答的作者会阅读它们，并根据您的建议进行编辑。如果您在这里使用了评论功能，就可以避免您代表我发布错误的信息，只是说一下。 - Louis Ameline

@saibbyweb document.onwheel = function(event){ console.log('滚轮事件'); } - Siphon

Answer 2

自 Firefox 3 版本起，它不再识别"mousewheel"。在 Firefox 中应该使用 "DOMMouseScroll" 代替。

查看此链接：http://www.javascriptkit.com/javatutors/onmousewheel.shtml

- Mahmoud Badri

Answer 3

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

- Alexander Shutau

Answer 4

Badri是正确的，对于firefox，您应该使用“DOMMouseScroll”。此外，对于delta，您需要使用event.originalEvent.detail而不是event.originalEvent.wheelDelta。对于向下滚动，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/

- Razan Paul

---

很好的解决方案，非常适合我的使用情况，谢谢！ :) - Ole Henrik Skogstrøm

Answer 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

本文将讨论如何使用JavaScript来检测并处理鼠标滚轮事件。在Firefox和Chrome中，不同的事件属性名导致开发人员需要写两套处理程序。我们将介绍一个跨浏览器的解决方案，在这个解决方案中，可以使用相同的代码来处理这两种浏览器中的滚轮事件。

- user3447253

---

“wheel” 看起来是当今主要的单个事件，可以看看Louis的回答。 - Charlie

Answer 6

或者直接使用 jquery-mousewheel jQuery 插件。

- Vladimir Georgiev

---

不需要加载如此大的库，因为有一种本地事件，被大多数现代浏览器支持。监听 mousewheel、wheel 和 DOMMouseScroll 就足够了。 您可以在 https://developer.mozilla.org/en-US/docs/Web/Events/wheel#Listening_to_this_event_across_browser 中进一步阅读 在 // detect available wheel event 注释下。 - thexpand