Question

我已经构建了一个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>

Answer 1

我已经使用以下内容来完成您正在寻找的内容：

$("#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;

});

有几点 - 你需要访问jQuery中的originalEvent才能使用targetTouches。此外，我确信很明显，您可以将offsetX / Y所需的任何属性对替换为鼠标事件。

如何防止触摸和鼠标事件之间的双重触发

1 个答案: