CODEWITHSUNDEEP
javascriptscrollmousemousewheel
Jem
Jem

Reputation: 6406

Javascript: Capture mouse wheel event and do not scroll the page?

I'm trying to prevent a mousewheel event captured by an element of the page to cause scrolling.

I expected false as last parameter to have the expected result, but using the mouse wheel over this "canvas" element still causes scrolling:

this.canvas.addEventListener('mousewheel', function(event) {
   mouseController.wheel(event);
}, false);

Outside of this "canvas" element, the scroll needs to happen. Inside, it must only trigger the .wheel() method. What am I doing wrong?

Upvotes: 35

Views: 57761

Answers (6)

Murtaza A
Murtaza A

Reputation: 41

To prevent the wheel event, this worked for me in chrome -

this.canvas.addEventListener('wheel', function(event) {
    event.stopPropagation()
}, true);

Upvotes: 0

GillesC
GillesC

Reputation: 10874

You can do so by returning false at the end of your handler (OG).

this.canvas.addEventListener('wheel',function(event){
    mouseController.wheel(event);
    return false; 
}, false);

Or using event.preventDefault()

this.canvas.addEventListener('wheel',function(event){
    mouseController.wheel(event);
    event.preventDefault();
}, false);

Updated to use the wheel event as mousewheel deprecated for modern browser as pointed out in comments.

The question was about preventing scrolling not providing the right event so please check your browser support requirements to select the right event for your needs.

Updated a second time with a more modern approach option.

Upvotes: 49

Rahul Rathod
Rahul Rathod

Reputation: 59

Finally, after trying everything else, this worked:

   canvas.addEventListener('wheel', (event) => {
    
          // event.preventDefault(); Not Working
          // event.stopPropagation(); Not Working
          event.stopImmediatePropagation(); // WORKED!!
    
         console.log('Was default prevented? : ',event.defaultPrevented); // Says true 
    }, false)

Upvotes: 0

Zeta
Zeta

Reputation: 105886

Have you tried event.preventDefault() to prevent the event's default behaviour?

this.canvas.addEventListener('mousewheel',function(event){
    mouseController.wheel(event);
    event.preventDefault();
}, false);

Keep in mind that nowadays mouswheel is deprecated in favor of wheel, so you should use

this.canvas.addEventListener('wheel',function(event){
    mouseController.wheel(event);
    event.preventDefault();
}, false);

Upvotes: 30

Jorge Fuentes González
Jorge Fuentes González

Reputation: 11809

Just adding, I know that canvas is only HTML5 so this is not needed, but just in case someone wants crossbrowser/oldbrowser compatibility, use this:

/* To attach the event: */
addEvent(el, ev, func) {
    if (el.addEventListener) {
        el.addEventListener(ev, func, false);
    } else if (el.attachEvent) {
        el.attachEvent("on" + ev, func);
    } else {
        el["on"+ev] = func; // Note that this line does not stack events. You must write you own stacker if you don't want overwrite the last event added of the same type. Btw, if you are going to have only one function for each event this is perfectly fine.
    }
}

/* To prevent the event: */
addEvent(this.canvas, "mousewheel", function(event) {
    if (!event) event = window.event;
    event.returnValue = false;
    if (event.preventDefault)event.preventDefault();
    return false;
});

Upvotes: 3

Lorenz Lo Sauer
Lorenz Lo Sauer

Reputation: 24710

This kind of cancellation seems to be ignored in newer Chrome >18 Browsers (and perhaps other WebKit based Browsers). To exclusively capture the event you must directly change the onmousewheel method of the element.

this.canvas.onmousewheel = function(ev){
    //perform your own Event dispatching here
    return false;
};

Upvotes: 1

Related Questions