Javascript: ¿Capture el evento de la rueda del mouse y no se desplace por la página?

Question

Estoy tratando de evitar que un evento mousewheel capturado por un elemento de la página cause desplazamiento.

que esperaba 'falso' como último parámetro a tener el resultado esperado, pero usando la rueda del ratón sobre este elemento "lienzo" todavía se produce un desplazamiento:

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

Fuera de este elemento "lienzo", el rollo necesita pasar En el interior, solo debe activar el método .wheel(). ¿Qué estoy haciendo mal?

Gracias! J.

Answer 1

Puede hacerlo mediante la devolución de false al final de su controlador.

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

Answer 2

¿Has probado event.preventDefault()?

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

Answer 3

Este tipo de cancelación parece ser ignorado en los nuevos navegadores Chrome> 18 (y quizás otros navegadores basados ​​en WebKit). Para capturar exclusivamente el evento, debe cambiar directamente el método onmousewheel del elemento.

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

Answer 4

Simplemente añadiendo, sé que la lona es solamente HTML5 así que esto no es necesario, pero por si acaso alguien quiere crossbrowser/compatibilidad oldbrowser, utilice esto:

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