使用画布防止窗口滚动

Question

我试图在画布上使用鼠标滚轮时阻止窗口滚动。我试着像这样禁用它：

document.getElementById( "canvasId" ).onmousedown = function(event){
    event.preventDefault();
};

还有其他一些方法，但没有任何作用可见：

http://jsfiddle.net/MZ9Xm/1/

使浏览器窗口变小，以便有一个滚动条，然后将鼠标滚轮放在画布上，它将使窗口滚动。如何让画布接收轮子信息但阻止窗口滚动？

我使用的是jquery（此处未显示）。

Answer 1

您可以使用wheel事件。您可能需要使用mousehweel代替other browsers而不是Firefox。

Vanilla JavaScript版

＆＃13;

＆＃13;

document.getElementById( "canvasId" ).onwheel = function(event){
    event.preventDefault();
};

document.getElementById( "canvasId" ).onmousewheel = function(event){
    event.preventDefault();
};

＆＃13;

html, body {height:200%} canvas {border:4px solid red}

＆＃13;

<canvas id="canvasId"></canvas>

＆＃13;

＆＃13;

＆＃13;

jQuery版本

＆＃13;

＆＃13;

$("#canvasId").bind("wheel mousewheel", function(e) {e.preventDefault()});

＆＃13;

html, body {height:200%} canvas {border:4px solid red}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvasId"></canvas>

＆＃13;

＆＃13;

＆＃13;