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浏览器中正确触发，并且在Firefox中没有触发？

Answer 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 +

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

Answer 2

从版本3开始，Firefox无法识别“mousewheel”。您应该使用“DOMMouseScroll”代替firefox。

检查一下：http://www.javascriptkit.com/javatutors/onmousewheel.shtml

Answer 3

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

提供了填充

Answer 4

Badri是对的，你应该使用＆＃34; DOMMouseScroll＆＃34;而是为了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/

Answer 5

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

Answer 6

这似乎适用于Safari，Chrome和Firefox（我还没有在IE中测试过）：

＆＃13;

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

＆＃13;

来自：http://www.h3xed.com/programming/javascript-mouse-scroll-wheel-events-in-firefox-and-chrome

在firefox浏览器中没有触发mousewheel事件

6 个答案: