как предотвратить двойной запуск между событиями касания и мыши - PullRequest
Новая
       14

как предотвратить двойной запуск между событиями касания и мыши

1 голос
/ 21 марта 2012

Я создал приложение для создания эскизов холста jquery 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>

1 Ответ

0 голосов
/ 23 марта 2012

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

$("#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, чтобы работать с targetTouches. Кроме того, как я уверен, это очевидно, вы можете заменить любую пару свойств, необходимую вам для offsetX / Y, для событий мыши.

...