event.preventDefault(); not stopping mousewheel in

问题:

I am using the mousewheel in jquery to increase the number of a div, the number increases correctly but the scroll is not stopped in 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/

The fiddle uses the standard mousewheel detection, but I have also used Brandon Aaron's mousewheel plugin and it has the same problem.

Removing the line that updates the text (I have also tried html()) of the div resolves the issue, but this is a crucial part of the code and cannot be removed.

Does anyone know how to resolve this issue?

Thank you

Update: I have found the problem only occurs when my mouse is positioned directly over the text, if my mouse is within the box but not over the text (within the padding) the scroll is stopped

回答1:

This is still one of the top posts when I search for the issue of Firefox scrolling despite preventing the scroll event.

Firefox triggers two events on mouse scroll: DOMMouseScroll and MozMousePixelScroll. See https://github.com/jquery/jquery-mousewheel/issues/45#issuecomment-11749359 It is necessary to prevent the MozMousePixelScroll event.

According to https://developer.mozilla.org/en-US/docs/Web/Events/MozMousePixelScroll the most modern event name is wheel, which appears to work with my version of Firefox (55) and Chrome (61). Probably this is what you should be using. See https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/WheelEvent

Here's a JSFiddle:

https://jsfiddle.net/ahpy9f66/

回答2:

try this

$(document).ready(function(){

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

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

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

回答3:

I have found a solution to my problem, it may not be the best way to do this but it works.

I found the problem only occurs when my mouse is positioned directly over the text during the scroll, so I added an overlaying element and use that as the mousewheel trigger.

Fiddle: http://jsfiddle.net/rHVUn/9/
(The background colour is not needed)

回答4:

This works fine on chrome, firefox lattest versions and 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>

回答5:

Have you tried to bind 'mousewheel' event instead of what you have? :

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

I adapted your fiddle and it seems to work

回答6:

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

Use this instead, which works for me