event.preventDefault(); not stopping mousewheel in Firefox

Question

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

Answer 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/

Answer 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;
    });
});

Answer 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)