Javascript: cattura l’evento rotellina del mouse e non scorre la pagina?

Sto tentando di impedire che un evento della rotellina di mouse catturato da un elemento della pagina causi lo scorrimento.

Mi aspettavo false come ultimo parametro per ottenere il risultato atteso, ma usando la rotella del mouse su questo elemento “canvas” continua a scorrere:

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

Al di fuori di questo elemento “canvas”, la pergamena deve avvenire. All’interno, deve solo triggersre il metodo .wheel() . Che cosa sto facendo di sbagliato?

Puoi farlo restituendo false alla fine del tuo gestore.

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

Aggiornato per utilizzare l’evento wheel come mousewheel deprecato per il browser moderno come indicato nei commenti.

La domanda riguardava la prevenzione dello scorrimento che non forniva l’evento giusto, quindi controlla i requisiti di supporto del browser per selezionare l’evento giusto per le tue esigenze.

Hai provato event.preventDefault() ?

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

Aggiungendo solo, so che il canvas è solo HTML5 quindi non è necessario, ma nel caso in cui qualcuno volesse la compatibilità crossbrowser / oldbrowser, usa questo:

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

Questo tipo di annullamento sembra essere ignorato nei nuovi browser Chrome> 18 (e forse anche altri browser basati su WebKit). Per catturare esclusivamente l’evento è necessario modificare direttamente il metodo onmousewheel dell’elemento.

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