8

我在 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 的鼠标滚轮插件，它也有同样的问题。

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

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

谢谢

更新：我发现只有当我的鼠标直接放在文本上时才会出现问题，如果我的鼠标在框内但不在文本上（在填充内），则滚动停止

4

7 回答 7

2

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

Firefox 在鼠标滚动时触发两个事件：DOMMouseScroll和MozMousePixelScroll. 见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/

于 2017-10-06T18:42:35.947 回答
1

试试这个

$(document).ready(function(){

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

        var currentValue = parseInt($('#test').text(),10),
            newValue = currentValue + 1;

        $('#test').text(newValue);    
        return false;
    });
});
于 2012-09-07T08:50:17.223 回答
1

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

我发现只有在滚动过程中鼠标直接位于文本上方时才会出现问题，因此我添加了一个覆盖元素并将其用作鼠标滚轮触发器。

小提琴： http: //jsfiddle.net/rHVUn/9/
（不需要背景颜色）

于 2012-09-10T11:39:37.213 回答
0

这在 chrome、firefox 最新版本和 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);
}
<div style="height:900px; border:0;">
    <div id="test">0</div>
    <span id="test_ov"></span>
</div>

于 2016-12-07T07:30:49.477 回答
0

没有一个答案对我有用，但event.stopImmediatePropagation()有效。

参考：https ://stackoverflow.com/a/63609840/10830621

于 2020-08-27T05:45:55.357 回答
-1

您是否尝试过绑定“鼠标滚轮”事件而不是您所拥有的？：

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

我改编了你的小提琴，它似乎工作

于 2012-09-07T08:26:35.057 回答
-1 
$('#objectId').on({
            'mousewheel': function(e) {                
                e.preventDefault();
                e.stopPropagation();
                }
            })

改用这个，这对我有用

于 2014-03-07T09:08:41.263 回答