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

【问题标题】：how to prevent double trigger between touch and mouse events如何防止触摸和鼠标事件之间的双重触发
【发布时间】：2012-04-06 08:30:43
【问题描述】：

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

【问题讨论】：

标签： html canvas touch

【解决方案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 所需的任何属性对替换为鼠标事件。

【讨论】：