Javascript:捕获鼠标滚轮事件,并且不滚动页面
Javascript: Capture mouse wheel event and do not scroll the page?
我正在尝试防止页面元素捕获的鼠标滚轮事件导致滚动。
我希望false
作为最后一个参数具有预期的结果,但是在这个"canvas"元素上使用鼠标滚轮仍然会导致滚动:
this.canvas.addEventListener('mousewheel', function(event) {
mouseController.wheel(event);
}, false);
在这个"画布"元素之外,需要滚动。在内部,它只能触发.wheel()
方法。我做错了什么?
您可以通过在
处理程序 (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
新式浏览器已弃用。
问题是关于防止滚动不提供正确的事件,因此请检查您的浏览器支持要求以选择适合您需求的事件。
使用更现代的方法选项进行了第二次更新。
您是否尝试过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);
补充一下,我知道画布只是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;
});
这种
取消似乎在较新的Chrome>18浏览器(也许还有其他基于WebKit的浏览器)中被忽略了。要以独占方式捕获事件,您必须直接更改元素的onmousewheel
方法。
this.canvas.onmousewheel = function(ev){
//perform your own Event dispatching here
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)
为了防止车轮事件,这在铬中对我有用 -
this.canvas.addEventListener('wheel', function(event) {
event.stopPropagation()
}, true);
相关文章:
- 只覆盖箭头键滚动事件
- Javascript如何找到滚动事件的来源
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- jquery/ajax无限滚动事件
- 如何检测滚动事件是否像在触摸设备上一样只触发一次
- 为什么不'我的窗口滚动事件根本没有启动.其他答案没有解决问题
- 如何用javascript调用函数,然后在滚动事件中调用该函数的特定实例
- 从父元素取消绑定滚动事件并绑定到子元素
- JavaScript/jQuery未触发滚动事件
- 如何使用javascript检测不可滚动元素中的滚动事件和方向
- AngularJS窗口滚动事件未触发
- 正在阻止滚动事件
- JavaScript 事件处理具有延迟的滚动事件
- 在画布上创建滚动事件
- 如何由于浏览器的平滑滚动而忽略大量滚动事件
- onclick滚动事件-语法
- 带有滚动事件的Javascript集翻译速度较慢
- 在firefox上的滚动事件中移动元素
- 鼠标滚轮事件和滚动事件相互冲突
- 滚动事件运行缓慢-有没有更轻松的方法