Javascript: Przechwyć zdarzenie kółka myszy i nie przewijaj strony?

Question

Próbuję zapobiec przewijaniu zdarzeń kółka myszy przechwyconych przez element strony.

Spodziewałem „false” jako ostatni parametr uzyskania oczekiwanego rezultatu, ale za pomocą kółka myszy nad tym „płótnie” element nadal powoduje przewijanie:

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

poza ten „płótnie” element, zwoju musi się wydarzyć. Wewnątrz musi wywoływać tylko metodę .wheel(). Co robię źle?

Dzięki! J.

Answer 1

Możesz to zrobić, zwracając false na końcu swojego programu obsługi.

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

Answer 2

Czy próbowałeś już event.preventDefault()?

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

Answer 3

Tego rodzaju anulowanie wydaje się być ignorowane w nowszych wersjach przeglądarki Chrome> 18 (a także w innych przeglądarkach opartych na WebKit). Aby wyłącznie uchwycić zdarzenie, należy bezpośrednio zmienić metodę elementu.

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

Answer 4

Wystarczy dodać, wiem, że płótno jest tylko HTML5, więc to nie jest potrzebne, ale tylko w przypadku, gdy ktoś chce crossbrowser/oldbrowser zgodność, użyj tego:

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