window.onmousewheel in Firefox

Question

This code disabled mouse scroll functionality, when i click on the document.

$(document).on("click", function () {
    window.onmousewheel = function (e) {
        e.preventDefault();
    }
});

but, this working in all browsers except Firefox. tell please, how to make this code as cross-browser ?

Olgaolguin

Answer 1

Firefox doesn't support .onmousewheel, you have to use the DOMMouseScroll event instead:

$(document).on( "mousewheel DOMMouseScroll", function(e){
    e.preventDefault();
});

Guido

for those using versions of 1.7 or less of jQuery I would recommend using .bind or .one instead of on as on is only supported in 1.7 and beyond – Mcanally

Answer 2

Firefox does not support the onmousewheel name for this event. You'll need to do it with the DOMMouseScroll event instead.

To detect whether onmousewheel is supported, you can do something like this:

var cancelscroll = function(e) {
    e.preventDefault();
};

if ("onmousewheel" in document) {
    document.onmousewheel = cancelscroll;
} else {
    document.addEventListener('DOMMouseScroll', cancelscroll, false);
}

Note that you needn't do this on DOM ready: the document will always be available to bind to, so you can do it immediately.

---

You ask how to remove the event listener in each case. A similar conditional will do the trick:

if ("onmousewheel" in document) {
    document.onmousewheel = function() {};
} else {
    document.removeEventListener('DOMMouseScroll', cancelscroll, false);
}

Wentletrap

Answer 3

You can use the (new) standardised event wheel. Docs:

• W3C standard: DOM Level 3 Events
• Mozilla Development Network
• Quirksmode compatibility chart (doesn't list cutting-edge versions)

I've found this works in Firefox v29.0.1 and Chrome v35.0.1916.114 on OSX (10.9.3), but not in Safari v7.0.4.

Teller

Best up-to-date answer with helpful links! – Meaganmeager