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

I forgot to mention, if you scroll up a few times, then down the scroll is stopped — Michael, Sep 07 '12 at 08:25

score 2 · Answer 1 · answered Oct 06 '17 at 18:42

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/

score 1 · Answer 2 · answered Sep 07 '12 at 08:50

1

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

answered Sep 07 '12 at 08:50

Sibu

4,609
2
26
38

Thank you, but if I try using Brandon Aaron's mousewheel plugin it breaks again http://jsfiddle.net/rHVUn/6/, ideally I would like it to work with and without the plugin. – Michael Sep 07 '12 at 09:01
@Michael which firefox version are you using it is working correctly over my system ..! – Sibu Sep 07 '12 at 09:16
I am using firefox version 15.0 – Michael Sep 07 '12 at 09:28
@Michael me too..i hope you know for this code to work you have to keep your mouse inside #test div and then scroll..! – Sibu Sep 07 '12 at 09:38
I do keep my mouse inside, at least I know it works for you, I will have to keep testing, thank you for your help – Michael Sep 07 '12 at 09:48

score 1 · Accepted Answer · answered Sep 10 '12 at 11:39

1

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)

answered Sep 10 '12 at 11:39

Michael

147
1
2
10

An unfortunate hack; I am still suffering from the original issue :( – Matt Feb 05 '13 at 16:37

score 0 · Answer 4 · answered Dec 07 '16 at 07:30

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>

score 0 · Answer 5 · edited Aug 27 '20 at 06:03

0

None of the answers were working for me, but event.stopImmediatePropagation() worked.

Refer to: https://stackoverflow.com/a/63609840/10830621

edited Aug 27 '20 at 06:03

Arghya Sadhu

41,002
9
78
107

answered Aug 27 '20 at 05:45

Rahul Rathod

39
9

score -1 · Answer 6 · answered Sep 07 '12 at 08:26

-1

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

answered Sep 07 '12 at 08:26

PoeHaH

1,936
3
28
52

Please can you post a link to the fiddle? I tried it and it did not work. – Michael Sep 07 '12 at 08:29
Firefox does not support `mousewheel`—instead use `DOMMouseScroll`. – Matt Feb 05 '13 at 16:35

score -1 · Answer 7 · answered Mar 07 '14 at 09:08

-1

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

Use this instead, which works for me

answered Mar 07 '14 at 09:08

Dhayalan

57
2

This just plain does not work. The event still fires multiple times. So far as I've found, it's not possible to prevent the default behaviour of a mousewheel event. Still trying to figure out why to find a way to circumvent that problem. – AJB Nov 06 '14 at 23:16

event.preventDefault(); not stopping mousewheel in Firefox

7 Answers7

Linked