2012-04-25 233 views
17

我試圖阻止頁面的單元以使滾動拍攝的鼠標滾輪事件。Javascript:捕獲鼠標滾輪事件並不滾動頁面?

我預計「假」作爲最後一個參數有預期的結果,但是使用鼠標滾輪在這個「畫布」元素還是引起滾動:

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

這個「畫布」元素之外,滾動需要發生。在裏面,它只能觸發.wheel()方法。 我在做什麼錯?

謝謝! J.

回答

29

您可以通過在你的處理程序結束返回false這樣做。

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

+1:我有完全相同的問題,因爲這和'返回false;'工作 – 2012-04-25 09:49:27

+0

好吧!事實上,這就是它。謝謝:-) – Jem 2012-04-25 09:52:38

+0

我覺得奇怪的是虛假意味着事件的處理。真會更合乎邏輯...... – 2015-08-12 07:48:01

19

你試過event.preventDefault()

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

沒錯,像函數(事件) {event.preventDefault(); mouseController.wheel(事件)} – Jem 2012-04-25 09:48:31

+0

啊,我忘了返回false。謝謝你的時間! – Jem 2012-04-25 09:52:55

1

在新的Chrome瀏覽器> 18瀏覽器(也可能是其他基於WebKit的瀏覽器)中,這種取消似乎被忽略。要專門捕獲事件,您必須直接更改元素的方法onmousewheel

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

剛加入的,我知道,帆布只有HTML5所以這是不需要的,但以防萬一有人想跨瀏覽器/ oldbrowser的兼容性,使用此:

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