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

Posted 2023-04-13

【中文标题】Javascript：捕获鼠标滚轮事件并且不滚动页面？

【英文标题】：Javascript: Capture mouse wheel event and do not scroll the page?

【发布时间】：2012-05-05 23:43:52

【问题描述】：

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

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

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

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

【参考方案1】：

您可以通过在处理程序 (OG) 结束时返回 false 来做到这一点。

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 已弃用现代浏览器，如 cmets 中指出的那样。

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

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

【讨论】：

+1：我遇到了与此完全相同的问题，return false; 工作

我觉得很奇怪，false表示事件被处理了。 True 会更合乎逻辑...

@ÁronLőrincz 你可以把这个问题想成“这个事件应该冒泡到更多元素吗？”，而在这种情况下答案是错误的。

这似乎不再起作用了。 @Zeta 的答案是唯一直接在 Chrome 中工作的解决方案。在 Firefox 中，我还必须将（已弃用）mousewheel 事件更改为 wheel 事件。我添加此评论是为了避免其他可能看不到该答案的人浪费时间。

mousewheel 已被正式弃用，取而代之的是 wheel 事件：developer.mozilla.org/en-US/docs/Web/Events/mousewheel

【参考方案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);

【讨论】：

是的，就像 function(event)event.preventDefault(); mouseController.wheel(event)

啊，我忘了返回false。感谢您的宝贵时间！

【参考方案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;
);

【参考方案4】：

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

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

【参考方案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)

【参考方案6】：

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

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