event.preventDefault(); 在Firefox中没有停止鼠标滚轮

我在jquery中使用鼠标滚轮来增加div的数量,数字正确增加但是在Firefox中没有停止滚动。

$(document).ready(function(){ $('#test').bind('mousewheel DOMMouseScroll', function(event){ var currentValue = parseInt($('#test').text(),10), newValue = currentValue + 1; $('#test').text(newValue); event.preventDefault(); }); }); 

小提琴: http : //jsfiddle.net/rHVUn/

小提琴使用标准鼠标滚轮检测,但我也使用了Brandon Aaron的鼠标滚轮插件,它也有同样的问题。

删除更新文本的行(我也尝试过html())解决了问题,但这是代码的关键部分,无法删除。

有谁知道如何解决这个问题?

谢谢

更新:我发现问题只发生在我的鼠标直接放在文本上方,如果我的鼠标在框内而不是在文本上(在填充内)滚动停止

试试这个

 $(document).ready(function(){ $('#test').bind('mousewheel DOMMouseScroll', function(event){ var currentValue = parseInt($('#test').text(),10), newValue = currentValue + 1; $('#test').text(newValue); return false; }); }); 

我找到了解决问题的方法,它可能不是最好的方法,但它有效。

我发现问题只发生在滚动过程中我的鼠标直接放在文本上方,所以我添加了一个重叠元素并将其用作鼠标滚轮触发器。

小提琴: http : //jsfiddle.net/rHVUn/9/
(不需要背景颜色)

尽管阻止了滚动事件,但当我搜索Firefox滚动问题时,这仍然是最热门的post之一。

Firefox在鼠标滚动上触发两个事件: DOMMouseScrollMozMousePixelScroll 。 请参阅https://github.com/jquery/jquery-mousewheel/issues/45#issuecomment-11749359有必要阻止MozMousePixelScroll事件。

根据https://developer.mozilla.org/en-US/docs/Web/Events/MozMousePixelScroll ,最现代的事件名称是wheel ,它似乎适用于我的Firefox(55)和Chrome(61)版本。 可能这是你应该使用的。 请参阅https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/WheelEvent

这是一个JSFiddle:

https://jsfiddle.net/ahpy9f66/

这适用于chrome,firefox lattest版本和IE, 试试这个 :

 document.onmousewheel = function(){ stopWheel(); } /* IE7, IE8 */ if(document.addEventListener){ /* Chrome, Safari, Firefox */ document.addEventListener('DOMMouseScroll', stopWheel, false); } function stopWheel(e){ if(!e){ e = window.event; } /* IE7, IE8, Chrome, Safari */ if(e.preventDefault) { e.preventDefault(); } /* Chrome, Safari, Firefox */ e.returnValue = false; /* IE7, IE8 */ } 
 div { float:left; width:25px; height:25px;; text-align:center; margin:5px; padding:5px; border:1px solid #bbb; } #test_ov { position:absolute; background:rgba(45,65,40,0.3); } 
 
0

你试过绑定’mousewheel’事件而不是你拥有的吗? :

 $('#test').bind('mousewheel', function(event){ ... 

我适应了你的小提琴,它似乎工作

 $('#objectId').on({ 'mousewheel': function(e) { e.preventDefault(); e.stopPropagation(); } }) 

请改用它,这对我有用