阻止默认事件的方法event.preventDefault()在Firefox中无法停止鼠标滚轮。

Question

我在使用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();
    });
});

Fiddle: http://jsfiddle.net/rHVUn/

这个示例使用了标准的鼠标滚轮检测，但我还使用了Brandon Aaron的鼠标滚轮插件，它也存在同样的问题。

如果移除更新div文本内容（我也尝试过更新html()），可以解决这个问题，但这是代码中至关重要的一部分，不能移除。

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

谢谢

更新： 我发现只有在鼠标直接移到文本上时，才会出现问题；如果鼠标在框内但不在文字上方（在padding内），则滚动会停止。

- Michael

---

我忘了提到，如果你向上滚动几次，然后向下滚动，滚动就会停止。 - Michael

Answer 1

我在搜索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/

- Gus

Answer 2

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

我发现问题只会在鼠标在滚动期间直接停留在文本上方时出现，所以我添加了一个覆盖元素，并将其用作鼠标滚轮触发器。

Fiddle: http://jsfiddle.net/rHVUn/9/
（背景颜色不需要）

- Michael

---

一个不幸的黑客攻击；我仍然遭受着最初的问题 :( - Matt

Answer 3

试一下这个

$(document).ready(function(){

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

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

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

- Sibu

---

谢谢，但是如果我尝试使用Brandon Aaron的鼠标滚轮插件，它会再次出现问题http://jsfiddle.net/rHVUn/6/，理想情况下，我希望它能够在有和没有插件的情况下都能正常工作。 - Michael

@Michael 你使用的是哪个版本的Firefox？在我的系统上它正常工作..！ - Sibu

我正在使用Firefox 15.0版本。 - Michael

@Michael 我也是。我希望你知道，为了让这段代码起作用，你必须将鼠标保持在 #test div 内并滚动。！ - Sibu

我确实把鼠标放在里面，至少我知道它对你有效，我将不断进行测试，感谢你的帮助。 - Michael

Answer 4

这在 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>

- Shah Harsh

Answer 5

对我来说，没有任何一个答案起作用，但是event.stopImmediatePropagation() 起了作用。

参考：https://dev59.com/q2kv5IYBdhLWcg3w1kSr#63609840

- Rahul Rathod

Answer 6

你尝试过绑定'mousewheel'事件而不是你现在的方式吗？

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

我修改了你的代码，看起来可以工作了。

- PoeHaH

---

请问您能否贴出fiddle的链接？我尝试了但它没有起作用。 - Michael

Firefox 不支持 mousewheel —— 请使用 DOMMouseScroll。 - Matt

Answer 7

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

请使用这个，这对我有效。

- Dhayalan

---

这根本不起作用。事件仍然会多次触发。据我所知，无法阻止鼠标滚轮事件的默认行为。仍在努力找到解决该问题的方法。 - AJB