mousewheel event is not triggering in firefox browser

问题

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 ?

回答1:

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

回答2:

This is 2017 and the right answer is now:

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

Works with current Firefox 51, Chrome 56, IE9+

Note: The value of the deltas will depend on the browser and the user settings.

回答3:

Use wheel event. This page also provides polyfills for old browsers https://developer.mozilla.org/en-US/docs/Web/Events/wheel

回答4:

Badri is right, you should use "DOMMouseScroll" instead for firefox. Addition to this, for delta you need to use event.originalEvent.detail instead of event.originalEvent.wheelDelta. For down, event.originalEvent.detail gives positive value whereas event.originalEvent.wheelDelta gives negative value and vice versa.

 $(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 (Works in IE 11, Firefox 33 and Chrome 38, I did not test other browsers): http://jsfiddle.net/rpaul/ckwu7u86/3/

回答5:

Or just use the jquery-mousewheel jQuery plugin.

回答6:

This seems to work in Safari, Chrome, and Firefox (I have not tested it in 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);
}

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

来源：https://stackoverflow.com/questions/16788995/mousewheel-event-is-not-triggering-in-firefox-browser

标签

javascript

jquery

mouseevent