Question

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

我希望false作为最后一个参数来获得预期的结果，但是在这个“canvas”元素上使用鼠标滚轮仍会导致滚动：

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

在这个“canvas”元素之外，滚动需要发生。在内部，它必须只触发.wheel()方法。我做错了什么？

Answer 1

您可以通过在处理程序末尾返回false来完成此操作。

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

已更新为使用wheel事件，因为mousewheel已弃用现代浏览器，如评论中所述。

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

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);

Answer 3

只是添加，我知道画布只是HTML5所以这不是必需的，但是如果有人想要crossbrowser / 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;
});

Answer 4

这种取消似乎在较新的Chrome＆gt; 18浏览器（以及其他基于WebKit的浏览器）中被忽略。要专门捕获事件，您必须直接更改元素的onmousewheel方法。

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

Answer 5

最后，在尝试了所有其他方法之后，它起作用了：

   canvas.addEventListener('wheel', (event) => {
    
          // event.preventDefault(); Not Working
          // event.stopPropagation(); Not Working
          event.stopImmediatePropagation(); // WORKED!!
    
         console.log('Was default prevented? : ',event.defaultPrevented); // Says true 
    }, false)

Answer 6

为了防止轮子事件，这在 chrome 中对我有用 -

this.canvas.addEventListener('wheel', function(event) {
    event.stopPropagation()
}, true);

Javascript：捕获鼠标滚轮事件，不滚动页面？

6 个答案: