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 ?

Answer 1

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

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

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