javascript - mousewheel event is not triggering in firefox browser

Question

Please refer the below code.

$(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;
    },

this event triggering properly in IE,chrome and not triggering in 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

Firefox doesn't recognize "mousewheel" as of version 3. You should use "DOMMouseScroll" instead for firefox.

check this: http://www.javascriptkit.com/javatutors/onmousewheel.shtml

Answer 3

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

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

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

Answer 6

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