Javascript：捕获鼠标滚轮事件而不滚动页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10313142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript: Capture mouse wheel event and do not scroll the page?
提问by Jem
I'm trying to prevent a mousewheel event captured by an element of the page to cause scrolling.
我试图防止页面元素捕获的鼠标滚轮事件导致滚动。
I expected falseas last parameter to have the expected result, but using the mouse wheel over this "canvas" element still causes scrolling:
我希望false作为最后一个参数得到预期的结果，但是在这个“画布”元素上使用鼠标滚轮仍然会导致滚动：
this.canvas.addEventListener('mousewheel', function(event) {
mouseController.wheel(event);
}, false);
Outside of this "canvas" element, the scroll needs to happen. Inside, it must only trigger the .wheel()method.
What am I doing wrong?
在这个“画布”元素之外，滚动需要发生。在里面，它必须只触发.wheel()方法。我究竟做错了什么？
回答by GillesC
You can do so by returning falseat the end of your handler.
您可以通过false在处理程序结束时返回来实现。
this.canvas.addEventListener('wheel',function(event){
mouseController.wheel(event);
return false;
}, false);
Updated to use the wheelevent as mousewheeldeprecated for modern browser as pointed out in comments.
如评论中指出的那样，更新为使用现代浏览器已弃用的wheel事件mousewheel。
The question was about preventing scrolling not providing the right event so please check your browser support requirements to select the right event for your needs.
问题是关于防止滚动不提供正确的事件，因此请检查您的浏览器支持要求，以选择适合您需要的事件。
回答by Zeta
Have you tried event.preventDefault()to prevent the event's default behaviour?
您是否尝试event.preventDefault()阻止事件的默认行为？
this.canvas.addEventListener('mousewheel',function(event){
mouseController.wheel(event);
event.preventDefault();
}, false);
Keep in mind that nowadays mouswheelis deprecated in favor of wheel, so you should use
请记住，现在mouswheel不推荐使用wheel，因此您应该使用
this.canvas.addEventListener('wheel',function(event){
mouseController.wheel(event);
event.preventDefault();
}, false);
回答by Jorge Fuentes González
Just adding, I know that canvas is only HTML5 so this is not needed, but just in case someone wants crossbrowser/oldbrowser compatibility, use this:
只是补充一下，我知道画布只是 HTML5，所以不需要，但以防万一有人想要跨浏览器/旧浏览器兼容性，请使用：
/* 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;
});
回答by Lorenz Lo Sauer
This kind of cancellation seems to be ignored in newer Chrome >18 Browsers (and perhaps other WebKit based Browsers). To exclusively capture the event you must directly change the onmousewheelmethod of the element.
这种取消似乎在较新的 Chrome > 18 浏览器（以及其他基于 WebKit 的浏览器）中被忽略。要专门捕获事件，您必须直接更改onmousewheel元素的方法。
this.canvas.onmousewheel = function(ev){
//perform your own Event dispatching here
return false;
};
