firefox + jquery mousewheel滚动事件错误 [英] firefox+jquery mousewheel scroll event bug

问题描述

  $（'。scrollMe'）。bind（mousewheel DOMMouseScroll，...）
  

$ $ $''。 ，...）

原始邮件

Firefox 16.0.2（latest）在绑定mousewheel / DOMMouseScroll事件时显示问题。在鼠标指针位于目标div上方的同时滚动鼠标滚轮也会导致窗口滚动，而我显然不希望这样。

我尝试添加几种方法来阻止传播等，但似乎没有工作。

Javascript代码：

 < code $ $（document）.ready（function（）{
 $（'。scrollMe'）。bind（mousewheel DOMMouseScroll，function（e）{
 e.stopImmediatePropagation（）; 
 e.stopPropagation（）; 
 e.preventDefault（）; 
 
 var delta = parseInt（e.originalEvent.wheelDelta || -e.originalEvent.detail）; 
 $ b $（this）.empty（）; 
 return false; 
}）; 
}）; 
  

要在行动中看到它，请按照下面的jsFiddle链接。在示例页面上，只需将鼠标指针放在带有红框的div内，然后使用鼠标的滚轮即可。 Firefox会第一次滚动父窗口（意外），而其他浏览器则不会。

jsFiddle代码示例

特别的是，Firefox在绑定元素上触发事件后不会重复该行为，这意味着它停止滚动这一页。但是，在您之后手动滚动页面并再次尝试之后，它会重复执行此操作。

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

是这真的是一个Firefox中的错误（如果是的话，是否有一个跨浏览器的黑客可能会做的伎俩）？或者，如果你知道有其他的解决方案来达到同样的捕捉鼠标滚轮事件的效果而不需要页面的窗口滚动的话，请随时回答！

解决方案

我不能在使用触摸板的FF 16.01 OSX中重现这个bug（小提琴工作正常），但是我知道还有另外一个叫做 MozMousePixelScroll 。您可能也想尝试介入。

MDN还提供更多信息： https://developer.mozilla.org/zh-CN/docs/DOM/DOM_event_reference/DOMMouseScroll

作为一个旁注，我认为使用 e.preventDefault（）来停止默认动作就足够了，不需要停止传播除非有其他IE特定的错误）。

UPDATE Working fix as suggested by David (see below):

replace

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

with

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

ORIGINAL POST

Firefox 16.0.2 (latest) shows an issue when binding the "mousewheel / DOMMouseScroll" event. Scrolling with the mousewheel while the mouse pointer is on top of my targeted div causes the window to scroll as well- whilst I obviously don't want this.

I tried adding several methods to stop propagation etc. but nothing seems to work.

Javascript code:

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

To see it in action, please follow the jsFiddle link below. On the example page, simply place the mouse pointer inside the div with red boxes and use your mouse's scrollwheel. Firefox will scroll the parent window the first time (unexpectedly), whilst other browsers don't.

jsFiddle Code example

Peculiar is that Firefox doesn't repeat the behaviour once you fire the event on the bound element, meaning it stops scrolling the page. However, it does repeat this behaviour after you manually scroll the page afterwards and try again.

I've also tested this in IE9 and Chrome but couldn't detect this issue in those browsers (meaning they don't scroll the window unexpectedly), so I'm guessing it's Firefox-specific (also disabled every plugin in firefox etc.)

Is this truly a bug in firefox (and if so is there a cross-browser hack that might do the trick)? Or, if you know of any other solution to achieve the same effect of catching the mousewheel event without having the page's window scroll, please feel free to answer!

解决方案

I can’t reproduce this bug in my FF 16.01 OSX using a touch pad (the Fiddle works fine), but I do know that there is another mozilla-specific event called MozMousePixelScroll. You might want to try to involve that as well.

There is also more information avail at MDN: https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll

As a sidenote, I think stopping the default action using e.preventDefault() should be enough, no need to stop the propagations as well (unless there are other IE specific bugs).

这篇关于firefox + jquery mousewheel滚动事件错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！