2012-04-25 232 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; 
});