2012-03-21 3 views
1

Я создал jquery html5 приложение для рисования холста html5, которое принимает события мыши для рабочего стола (планшеты для пера просто используют события мыши). Я также хотел бы позволить рисовать пальцем на устройствах iphone, ipad, andriod в качестве мобильного приложения с поддержкой Интернета. Поскольку мобильные устройства также запускают события щелчка мыши самостоятельно: Означает ли это, что я должен определить тип браузера и заменить все привязки мыши на привязку привязки, чтобы предотвратить двойное срабатывание событий?как предотвратить двойной триггер между событиями касания и мыши

Вот глупый пример:

<!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> 

ответ

0

Я использовал следующие делать то, что вы ищете:

$("#myCanvas").bind("touchstart mousedown", function (event) { 
    var e = event.originalEvent; 
    e.preventDefault(); 

    startX = (e.targetTouches != undefined) ? e.targetTouches[0].screenX : e.offsetX; 
    startY = (e.targetTouches != undefined) ? e.targetTouches[0].screenY : e.offsetY; 

}); 

Пару точек - вы должны получить доступ к originalEvent в jQuery, чтобы работать с targetTouch. Кроме того, как я уверен, очевидно, вы можете заменить любую пару свойств, необходимую для смещения X/Y для событий мыши.

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