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

Posted 2023-04-13

【中文标题】firefox+jquery 鼠标滚轮滚动事件错误

【英文标题】：firefox+jquery mousewheel scroll event bug

【发布时间】：2012-10-27 18:44:30

【问题描述】：

更新大卫建议的工作修复（见下文）：

替换

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

与

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

原帖

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;
            );
    );

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

jsFiddle Code example

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

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

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

【问题讨论】：

提示：使用 event.originalEvent.deltaY 作为 ff 中的方向而不是 event.originalEvent.wheelDelta

拯救了我的一天！竖起大拇指！

【参考方案1】：

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

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

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

【讨论】：

将 MozMousePixelScroll 添加到要收听的事件列表中实际上起到了作用。更多 RTFM 适合我！

如点赞页面中所述，使用“wheel”事件而不是“mousewheel”允许取消它并阻止其默认行为

+L2Eer，您能否发布您使用的代码。我真的遇到了同样的问题，代码示例真的很有帮助。谢谢。

【参考方案2】：

阅读https://developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/DOMMouseScroll 似乎 MozMousePixelScroll DOMMouseScroll 适用于 firefox 16 或更早版本。对于 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;
        );
);

【参考方案3】：

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

How to detect scroll direction

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

【参考方案4】：

此答案是 Chrome、Firefox 和 iExplorer 上的跨浏览解决方案

var handlerMousewheel = function()
		$(".item").on("wheel mousewheel", function(event) 
			event.preventDefault();
				var deltaY = event.originalEvent.deltaY;
				var wheelDeltaY = event.originalEvent.wheelDeltaY;

				 if( deltaY == 100 && wheelDeltaY == -120 || deltaY > 0 && wheelDeltaY == undefined ) 
			   		$(".wrapper").animate("margin-left":"0%",duration:100);
				 else if(deltaY == -100 && wheelDeltaY == 120 || deltaY < 0 && wheelDeltaY == undefined)
			      $(".wrapper").animate("margin-left":"50%",duration:100);
				 
	
		);
	
  handlerMousewheel();

.container
  display:block;
  width:100%;
  height:200px;
  overflow-x:hidden;
  overflow-y:scroll;
  background-color: grey;  

.wrapper
  display:block;
  overflow:hidden;
  background-color:#a3cfef;
  padding: 2%;
  width:50%;
  margin:0 auto;

.item
  width:100%;
  height:50px;
  margin:2px 0;
  display:block;
  overflow:hidden;
  border:3px solid #ad08a6;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
    <div class="item"></div>    
  </div>
</div>

https://jsfiddle.net/rrubio/ncLjgwy0/