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 ?

Answers:

Answer

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

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.

Answer

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

Answer

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/

Answer

Or just use the jquery-mousewheel jQuery plugin.

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.