web-dev-qa-db-ja.com

Firefoxブラウザーでmousewheelイベントがトリガーされない

以下のコードを参照してください。

$(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ではトリガーされません。

javascriptjquerymouseevent
27
SivaRajini

Firefoxはバージョン3の時点で「マウスホイール」を認識しません。Firefoxの代わりに「DOMMouseScroll」を使用する必要があります。

これを確認してください： http://www.javascriptkit.com/javatutors/onmousewheel.shtml

23
Mahmoud Badri

これは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 +で動作します

注：デルタの値は、ブラウザーとユーザー設定によって異なります。

34
Louis Ameline

wheelイベントを使用します。このページは、古いブラウザ用のポリフィルも提供します https://developer.mozilla.org/en-US/docs/Web/Events/wheel

15
Alexander Shutau

バドリは正しい、Firefoxの代わりに「DOMMouseScroll」を使用する必要があります。これに加えて、デルタでは、event.originalEvent.wheelDeltaの代わりにevent.originalEvent.detailを使用する必要があります。ダウンの場合、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 /

14
Razan Paul

または、単に jquery-mousewheel jQueryプラグインを使用します。

2
Vladimir Georgiev

これは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);
}

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

2
kdenis