javascript - firefox+jquery鼠标滚轮滚动事件bug

Question

更新按照大卫的建议进行工作修复(见下文):

替换

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

与

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

原始帖子

Firefox 16.0.2(最新)在绑定(bind)“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;
            });
    });

要查看其实际效果，请点击下面的 jsFiddle 链接。在示例页面上，只需将鼠标指针放在带有红色框的 div 内，然后使用鼠标滚轮即可。 Firefox 将在第一次(意外)滚动父窗口，而其他浏览器则不会。

jsFiddle Code example

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

我还在 IE9 和 Chrome 中测试了这一点，但无法在这些浏览器中检测到这个问题(意味着它们不会意外滚动窗口)，所以我猜测这是 Firefox 特有的(还禁用了火狐等)

这真的是 Firefox 中的一个错误吗(如果是的话，是否有跨浏览器黑客可以解决这个问题)？或者，如果您知道任何其他解决方案可以在不滚动页面窗口的情况下实现捕获鼠标滚轮事件的相同效果，请随时回答!

Answer 1

我无法使用触摸板在我的 FF 16.01 OSX 中重现此错误(Fiddle 工作正常)，但我确实知道还有另一个特定于 mozilla 的事件，名为 MozMousePixelScroll 。您可能也想尝试参与其中。

MDN 上还提供了更多信息:https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll

作为旁注，我认为使用 e.preventDefault() 停止默认操作应该足够了，不需要停止传播(除非存在其他 IE 特定的错误)。