javascript - imagen - onmouseover html ejemplo

Javascript: ¿Captura el evento de la rueda del ratón y no desplazas la página?

Question

Estoy intentando evitar que un evento de rueda del ratón capturado por un elemento de la página provoque un desplazamiento

Esperaba que false como último parámetro tuviera el resultado esperado, pero el uso de la rueda del ratón sobre este elemento "lienzo" todavía causa el desplazamiento:

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

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

Answer 1

¿Has probado event.preventDefault() ?

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

Answer 2

Este tipo de cancelación parece ignorarse en los navegadores Chrome> 18 más recientes (y quizás en 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 3

Puede hacerlo devolviendo false al final de su controlador.

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

Se actualizó para usar el evento de la wheel como una wheel la wheel en desuso para el navegador moderno como se señala en los comentarios.

La pregunta era acerca de evitar que el desplazamiento no proporcione el evento correcto, así que verifique los requisitos de soporte de su navegador para seleccionar el evento adecuado para sus necesidades.

Answer 4

Solo agregando, sé que el lienzo solo es HTML5, por lo que no es necesario, pero en caso de que alguien quiera compatibilidad entre los navegadores / exploradores, use 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;
});