Javascript:捕获鼠标滚轮事件,不滚动页面？

Question

我正在尝试阻止页面元素捕获的鼠标滚轮事件导致滚动.

我期望false作为最后一个参数获得预期的结果,但在这个"canvas"元素上使用鼠标滚轮仍会导致滚动:

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

在这个"画布"元素之外,滚动需要发生.在里面,它必须只触发.wheel()方法.我究竟做错了什么？

Answer 1

您可以通过false在处理程序的末尾返回来执行此操作.

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

更新为在评论中指出的现代浏览器已弃用的wheel事件mousewheel.

问题是关于阻止滚动不提供正确的事件所以请检查您的浏览器支持要求,以根据您的需要选择正确的事件.

这似乎不再起作用了.@ Zeta的答案是唯一直接在Chrome中运行的解决方案.在Firefox中,我还必须将(不推荐的)`mousewheel`事件更改为`wheel`事件.我正在添加此评论以避免其他人浪费时间,可能看不到答案. (5认同)

Answer 2

您是否尝试event.preventDefault()阻止事件的默认行为？

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

请记住,现在mouswheel已经弃用了wheel,所以你应该使用

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