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

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

我希望

false

作为最后一个参数可以得到预期的结果，但是在这个“canvas”元素上使用鼠标滚轮仍然会导致滚动：

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

在这个“canvas”元素之外，需要进行滚动。在内部，它只能触发

.wheel（）

方法。 我做错了什么？

您是否试图阻止事件的默认行为

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

请记住，现在是不赞成赞成赞成，所以你应该使用

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

---

您可以通过在处理程序（OG）的末尾返回

false

来执行此操作

或者使用

event.preventDefault（）

更新为使用

wheel

事件作为

mousewheel

不推荐用于现代浏览器，如注释中所述

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

---

第二次更新时使用了更现代的方法选项。

这种取消似乎在较新的Chrome>18浏览器（可能还有其他基于WebKit的浏览器）中被忽略。要以独占方式捕获事件，必须直接更改元素的

onmouseheel

方法

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

---

只是补充一下，我知道canvas只是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;
});

---

最后，在尝试了所有其他方法后，这一方法奏效了：

   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)

---

为了防止车轮事件，这对我来说在chrome中起了作用-

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

---

是的，就像函数（event）{event.preventDefault（）；mouseController.wheel（event）}啊，我忘了返回false。谢谢你的时间+1：我遇到了与此完全相同的问题，并且

返回false工作我发现false表示事件已被处理，这很奇怪。如果是真的，则更符合逻辑…@ronLőrincz你可以想象这样一个问题：“这件事是否会产生更多的因素？”，而在这种情况下，答案是假的。这似乎不再有效了@Zeta的答案是唯一一个直接在Chrome中起作用的解决方案。在Firefox中，我还必须将（已弃用的）
mouseweel
事件更改为
wheel
事件。我添加此评论是为了避免其他可能看不到答案的人浪费时间。
mouseweel
已被正式弃用，取而代之的是
wheel
事件：
   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)

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