предотвратить прокрутку во время события html5 canvas touchmove - PullRequest
Новая
       14

предотвратить прокрутку во время события html5 canvas touchmove

6 голосов
/ 21 марта 2012

Как запретить прокрутку без предотвращения по умолчанию, потому что я все еще хочу, чтобы событие 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 Ответ

5 голосов
/ 22 марта 2012

Когда вы говорите, что хотите, чтобы это было обработано - это все еще может быть.Просто напишите это следующим образом: 

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

Я не гарантирую, что один метод protectDefault остановит прокрутку, но вы так и напишите, если хотите, чтобы он предотвращал использование по умолчанию и выполнял собственный метод.,Вы также можете сделать вызов в самой себе brushMove.

Позвольте мне просто сказать, что вы , вероятно, должны делать preventDefault в touchStart, а не touchMove.touchMove на самом деле может быть слишком поздно, потому что, если он прокручивается, не может быть никаких событий touchMove!

...