Intercept Mouse Wheel Tilt events?

Question

I tried to override Chrome's mouse wheel event with this code:

// Wheel handler
function wheel(event){
    var ret = true;

    if (event.wheelDelta) {
        // Tilt to the left
        if (event.wheelDeltaX > 0) {
            alert('Left');
            //window.history.back();
            ret = false;
        }
        // Tilt to the right
        if (event.wheelDeltaX < 0) {
            alert('Right');
            //window.history.forward();
            ret = false;
        }
    }

    event.returnValue = ret;
}

// Bind the onmousewheel event to our handler
window.onmousewheel = document.onmousewheel = wheel;

But it seems that when I tilt left/right, nothing happens. What's wrong with this userscript? Thanks.

Try this one instead: https://jsfiddle.net/0o1eeL2L/ – icecub Jan 14 '17 at 04:27 — icecub, Jan 14 '17 at 04:27

score 0 · Answer 1 · edited May 23 '17 at 12:24

Refer to the wheel event reference and use the proper event properties.
Also, don't use window.on...; always use addEventListener (or jQuery).
Use .preventDefault() and .stopImmediatePropagation() to block the default action.
Finally, depending on what you are trying to block, you may wish/need to bind to specific elements, rather than document.

Here's working code that shows the techniques. Run the snippet and try it:

var blockedNode = document.getElementById ("blockit");
blockedNode.addEventListener ("wheel", mouseTiltDetect);
//document.addEventListener ("wheel", mouseTiltDetect);

function mouseTiltDetect (zEvent) {
    var blockit = false;

    if (zEvent.deltaX) {
        if (zEvent.deltaX < 0) {        //--  Tilt to the left
            console.log ('Left');
            blockit = true;
        }
        else if (zEvent.deltaX > 0) {   //--  Tilt to the right
            console.log ('Right');
            blockit = true;
        }
    }

    if (blockit) {
        zEvent.preventDefault ();
        zEvent.stopImmediatePropagation ();
    }
}

pre {
    overflow-x: scroll;
    height: 5em;
    border: 1px solid gray;
}

<pre>
Horizontally scroll me using mouse wheel tilt. ... Chuck ipsum. Chuck Norris once tried to wear glasses. The result was him seeing around the world to the point where he was looking at the back of his own head.
</pre>
<hr>
<pre id="blockit">
But you can't scroll this the same way. ... Chuck ipsum. Although it is not common knowledge, there are actually three sides to the Force: the light side, the dark side, and Chuck Norris.
</pre>

Intercept Mouse Wheel Tilt events?

1 Answers1