首页 文章

firefox jquery鼠标滚动事件错误

提问于
浏览 次
22

UPDATE 大卫建议的工作修正（见下文）：

更换

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

同

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

ORIGINAL POST

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中的每个插件等） ）

这真的是firefox中的一个错误（如果有的话，是否会出现跨浏览器的黑客攻击）？或者，如果您知道任何其他解决方案以实现捕获鼠标滚轮事件的相同效果而不使页面的窗口滚动，请随时回答！

javascript jquery firefox mousewheel

4 回答

  • 1

    我无法使用触摸板在我的FF 16.01 OSX中重现这个错误（小提琴工作正常），但我知道还有另一个名为MozMousePixelScroll的特定于mozilla的事件 . 您可能也想尝试将其包含在内 .

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

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

    回复于
  • 18

    阅读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;
        });
});
    回复于
  • 0

    关于这个问题的答案，我找到了与浏览器最兼容的解决方案：

    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;
    });
    回复于
  • 5

    This answer is a crossbrowsing solution on Chrome, Firefox and 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/

    回复于

相关问题