web-dev-qa-db-fra.com

l'événement mousewheel ne se déclenche pas dans le navigateur Firefox

Veuillez vous référer au code ci-dessous.

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

cet événement se déclenchant correctement dans IE, chrome et ne se déclenchant pas dans Firefox?

javascriptjquerymouseevent
27
SivaRajini

Firefox ne reconnaît pas "mousewheel" à partir de la version 3. Vous devez utiliser "DOMMouseScroll" à la place pour firefox.

vérifiez ceci: http://www.javascriptkit.com/javatutors/onmousewheel.shtml

23
Mahmoud Badri

Nous sommes en 2017 et la bonne réponse est maintenant:

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

Fonctionne avec Firefox 51 actuel, Chrome 56, IE9 +

Remarque: La valeur des deltas dépendra du navigateur et des paramètres utilisateur.

34
Louis Ameline

Utilisez l'événement wheel. Cette page fournit également des polyfills pour les anciens navigateurs https://developer.mozilla.org/en-US/docs/Web/Events/wheel

15
Alexander Shutau

Badri a raison, vous devriez utiliser "DOMMouseScroll" à la place pour Firefox. De plus, pour delta, vous devez utiliser event.originalEvent.detail au lieu de event.originalEvent.wheelDelta. Pour down, event.originalEvent.detail donne une valeur positive tandis que event.originalEvent.wheelDelta donne une valeur négative et 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 (Fonctionne dans IE 11, Firefox 33 et Chrome 38, je n'ai pas testé d'autres navigateurs): http://jsfiddle.net/rpaul/ckwu7u86/3 /

14
Razan Paul

Ou utilisez simplement le plugin jquery-mousewheel jQuery.

2
Vladimir Georgiev

Cela semble fonctionner dans Safari, Chrome et Firefox (je ne l'ai pas testé dans 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);
}

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

2
kdenis