使用画布防止窗口滚动

Question

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

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

还有其他一些方法,但没有任何作用:

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

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

我正在使用jquery(此处未显示).

Answer 1

您可以使用该wheel活动.您可能需要使用mousewheel而不是为其他浏览器比Firefox.

香草JavaScript版

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

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

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

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

jQuery版本

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

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

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