2012-03-21 4 views
6

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

ответ

5

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

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

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

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

Смежные вопросы