Script not running in Firefox, but ran in Chrome

Question

I made a script to register the thumb scroll wheel event (MX Master 2S if you're wondering). However, this script ran perfectly fine in Chrome, but not in Firefox (Quantum). Why is that so?

var expression = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
var regex = new RegExp(expression);
var elements = document.getElementsByClassName('pagination'); // get the elements
var search = (elements[0].innerHTML.match(regex));

//alert(search);
if(document.addEventListener){
    document.addEventListener("mousewheel", MouseWheelHandler, false);
    document.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else {
    document.attachEvent("onmousewheel", MouseWheelHandler);
}

function MouseWheelHandler(e) {
    var e = window.event || e;
  var ret = true;

  if (e.wheelDelta) {
    // Tilt to the left
    if (e.wheelDeltaX < 0) {
        str = window.location.toString();
        strsplit = str.split('/');
        preloc=Number(strsplit[4])+1;
        if (preloc > 0) {
        window.location.replace("https://somepage.com/page/"+preloc);}
        prelocstr=preloc.toString();
        if (prelocstr == "NaN") {
        window.location.replace(search[0]); }
      ret = false;
    }
    // Tilt to the right
    if (e.wheelDeltaX > 0) {
        str = window.location.toString();
        strsplit = str.split('/');
        preloc=Number(strsplit[4])-1;
        if (preloc > 0) {
        window.location.replace("https://somepage.com/page/"+preloc);}
      ret = false;
    }
  }

  event.returnValue = ret;
}

This script is made within Tampermonkey. Could anyone point me the mistake? Thanks in advance!

Answer 1

There's a newer standard for handling mouse wheel event that's standard across browsers:

https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent

https://developer.mozilla.org/en-US/docs/Web/Events/wheel

To use this event, do:

document.addEventListener("wheel", MouseWheelHandler);

And there's no need for:

e = window.event || e

The event will be there.

Answer 2

Only DOMMouseScroll works with Firefox, but it uses a different API. So, you have to write a separate handler for Firefox, instead of using the MouseWheelHandler , or adjust the MouseWheelHandler to support both.

As kshetline pointed out, there is now a new standard, which works with all modern browsers: https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent .

The other two options don't work in Firefox, as stated here:

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Source: https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel