在firefox浏览器中没有触发mousewheel事件

Question

请参考以下代码.

$(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中正确触发,Chrome并没有在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

从版本3开始,Firefox无法识别"鼠标滚轮".您应该使用"DOMMouseScroll"代替firefox.

检查一下: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/