代码之家 › 专栏 › 技术社区 › Michael

event.prventDefault();在Firefox中不停止鼠标滚轮

preventdefault mousewheel jquery

Michael · 技术社区 · 12 年前

我在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())解决了这个问题,但这是代码的关键部分,无法删除。

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

非常感谢。

更新: 我发现只有当我的鼠标直接放在文本上时,问题才会出现,如果我的鼠标在框内,但不在文本上(在填充中),滚动就会停止

7 回复 | 直到 12 年前

Gus 7 年前

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

Firefox在鼠标滚动时触发两个事件: DOMMouseScroll 和 MozMousePixelScroll 看见 https://github.com/jquery/jquery-mousewheel/issues/45#issuecomment-11749359 有必要防止 鼠标指针滚动 事件

根据 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/

Sibu 12 年前

试试这个

$(document).ready(function(){

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

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

        $('#test').text(newValue);    
        return false;
    });
});

Michael 12 年前

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

我发现只有当我的鼠标在滚动过程中直接放在文本上时才会出现问题,所以我添加了一个覆盖元素,并将其用作鼠标滚轮触发器。

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

Shah Harsh 8 年前

这在chrome、firefox最新版本和IE上运行良好, Try this 以下为:

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>

Arghya Sadhu Dharmesh 4 年前

没有一个答案对我有效,但是 event.stopImmediatePropagation() 工作。

请参阅: https://stackoverflow.com/a/63609840/10830621

-1

PoeHaH 12 年前

您是否尝试绑定“mousewheel”事件而不是现有事件?:

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

我调整了你的小提琴,它似乎起作用了

-1

Dhayalan 10 年前

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

用这个代替,对我有用