使用Javascript：捕捉鼠标滚轮事件，不滚动页面？使用Javascript：捕捉鼠标滚轮事件，

我想，以防止页面造成滚动的元素拍摄的鼠标滚轮事件。

我希望false的最后一个参数有预期的结果，但是使用鼠标滚轮在这个“画布”元素还是引起滚动：

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

这个“画布”元素之外，滚动需要发生。 在内部，它只能触发.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所以这是不需要的，但以防万一有人想跨浏览器/ 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浏览器> 18个浏览器（也许还有其他的基于WebKit的浏览器）被忽略。 专门捕获事件必须直接改变onmousewheel元素的方法。

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

文章来源: Javascript: Capture mouse wheel event and do not scroll the page?