javascript - Javascript：捕获鼠标滚轮事件并且不滚动页面？

Question

我试图防止页面元素捕获的鼠标滚轮事件导致滚动。

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

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

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

Answer 1

您可以通过false在处理程序 (OG) 结束时返回来执行此操作。

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

或使用event.preventDefault()

this.canvas.addEventListener('wheel',function(event){
    mouseController.wheel(event);
    event.preventDefault();
}, 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，所以这不是必需的，但以防万一有人想要跨浏览器/旧浏览器兼容性，使用这个：

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