Javascript firefox+；jquery鼠标滚轮滚动事件错误

更新David建议的工作修复程序（见下文）：

替换

    $('.scrollMe').bind("mousewheel DOMMouseScroll", ...) 

与

原创帖子

Firefox 16.0.2（最新版本）在绑定“mousewheel/DOMMouseScroll”事件时显示了一个问题。当鼠标指针位于我的目标div上方时，使用鼠标滚轮滚动会导致窗口也滚动，而我显然不希望这样

我尝试添加几种方法来停止传播等，但似乎没有任何效果

Javascript代码：

    $(document).ready(function() {
            $('.scrollMe').bind("mousewheel DOMMouseScroll", function(e) {
                e.stopImmediatePropagation();
                e.stopPropagation();
                e.preventDefault();

                var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);

                $(this).empty();    
                return false;
            });
    });

要查看它的实际操作，请遵循下面的JSFIDLE链接。在示例页面上，只需将鼠标指针放在带有红色框的div中，然后使用鼠标滚轮即可。Firefox会第一次（意外地）滚动父窗口，而其他浏览器不会

奇怪的是，一旦在绑定元素上触发事件，Firefox就不会重复该行为，这意味着它停止滚动页面。但是，在您手动滚动页面并重试后，它会重复此行为

我也在IE9和Chrome中测试过这个问题，但在那些浏览器中没有检测到这个问题（这意味着它们不会意外地滚动窗口），所以我猜它是特定于Firefox的（也禁用了Firefox中的每个插件等）

---

这真的是firefox中的一个bug吗（如果是的话，有没有跨浏览器的黑客可以做到这一点）？或者，如果您知道任何其他解决方案可以在没有页面窗口滚动的情况下实现捕捉鼠标滚轮事件的相同效果，请随时回答

我不能用触摸板在我的FF 16.01 OSX中重现这个bug（小提琴可以正常工作），但我知道还有一个特定于mozilla的事件叫做。你也可以尝试参与其中

MDN还提供了更多信息：

作为旁注，我认为使用

e.preventDefault（）

停止默认操作应该足够了，也不需要停止传播（除非存在其他IE特定的bug）。

阅读 MozMouseScroll似乎是针对Firefox16或更早版本的。对于firefox>17，使用

wheel

事件

$(document).ready(function() {
        $('.scrollMe').bind("wheel mousewheel", function(e) {
            e.preventDefault();

            var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);

            $(this).empty();    
            return false;
        });
});

---

这个问题的答案是我找到的最兼容浏览器的解决方案：

$（'elem'）。在（'DOMMouseScroll mouseweel'，函数（事件）{
如果（event.originalEvent.detail>0 | | event.originalEvent.wheelDelta<0）{//wheeldeldata的可选选项：wheelDeltaX和wheelDeltaY
//向下滚动
console.log（'Down'）；
}否则{
//向上滚动
console.log（'Up'）；
}
//防止页面fom滚动
返回false；
});

这个答案是Chrome、Firefox和iExplorer上的交叉浏览解决方案

var handlermouseweel=函数（）{
$（“.item”）。在（“滚轮鼠标滚轮”上，函数（事件）{
event.preventDefault（）；
var deltaY=event.originalEvent.deltaY；
var wheelDeltaY=event.originalEvent.wheelDeltaY；
如果（deltaY==100&&wheelDeltaY==120 | | deltaY>0&&wheelDeltaY==未定义）{
$（“.wrapper”）.animate（{“左边距”：“0%”，{duration:100}）；
}else if（deltaY==100&&wheelDeltaY==120 | | deltaY<0&&wheelDeltaY==未定义）{
$（“.wrapper”）.animate（{“左边距”：“50%”，{duration:100}）；
}
});
}
把手鼠标轮（）
.container{
显示：块；
宽度：100%；
高度：200px；
溢出x：隐藏；
溢出y：滚动；
背景颜色：灰色；
}
.包装纸{
显示：块；
溢出：隐藏；
背景色：#a3cfef；
填充：2%；
宽度：50%；
保证金：0自动；
}
.项目{
宽度：100%；
高度：50px；
边际：2px0；
显示：块；
溢出：隐藏；
边框：3px实心#ad08a6；
}

将MozMousePixelScroll添加到要收听的事件列表中确实起到了作用。给我更多的时间！如喜欢的页面中所述，使用“wheel”事件而不是“mousewheel”允许ot取消它并阻止其默认行为+L2Eer，您可以发布您使用的代码吗。我对您的同一个问题一直很不满，一个代码示例将非常有帮助。谢谢。提示：在ff中使用event.originalEvent.deltaY作为方向，而不是event.originalEvent.wheelDeltaSaved my day！竖起大拇指！
$(document).ready(function() {
        $('.scrollMe').bind("wheel mousewheel", function(e) {
            e.preventDefault();

            var delta = parseInt(e.originalEvent.wheelDelta || -e.originalEvent.detail);

            $(this).empty();    
            return false;
        });
});

 $('#elem').on( 'DOMMouseScroll mousewheel', function ( event ) { 
    if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
        //scroll down
        console.log('Down');
      } else {
        //scroll up
        console.log('Up');
      }
      //prevent page fom scrolling
      return false;
    });