在html5 canvas touchmove事件期间阻止滚动

时间:2012-03-21 18:54:04

标签: html5 canvas scroll

如何在不阻止默认情况下阻止滚动,因为我仍然希望处理touchmove事件:

    <!DOCTYPE html>
    <html>
    <head>
      <script src="jquery.min.js"></script>
    </head>
    <body>
    <canvas id="myCanvas" width="1600px" height="1600px" style="border:1px dashed gray;background-color:white;">
    </canvas>

    <script>

    function brushStart() {
      $('#myCanvas').css('background-color','blue');  
    }
    function brushEnd() {
      $('#myCanvas').css('background-color','red');   
    }
    function brushMove() {
      $('#myCanvas').css('background-color','yellow');  
    }

    $('#myCanvas').bind('mousedown', brushStart);
    $('#myCanvas').bind('mouseup', brushEnd);
    $('#myCanvas').bind('mousemove', brushMove);
    $('#myCanvas')[0].addEventListener('touchstart',brushStart,false);
    $('#myCanvas')[0].addEventListener('touchend',brushEnd,false);
    $('#myCanvas')[0].addEventListener('touchmove',brushMove,false);

    </script>

    </body>
    </html>

1 个答案:

答案 0 :(得分:5)

当你说你想要它被处理时 - 它仍然可以。就这样写:

$('#myCanvas')[0].addEventListener('touchmove', function(e) {
  e.preventDefault();
  brushMove();
},false);

我不保证单独使用preventDefault会停止滚动,但是如果你想要它来阻止默认设置并且你自己的方法也是如此,那就是你编写它的方式。你也可以把这个调用放在brushMove本身。

我只想说你可能需要在preventDefault而不是touchStart中进行touchMovetouchMove实际上可能为时已晚,因为如果滚动可能不会有touchMove个事件!