如何防止觸摸和鼠標事件之間的雙觸發

我已經構建了一個接受桌面鼠標事件（筆平板電腦只使用鼠標事件）的jQuery html5畫布草圖應用程序。我還希望允許用iphone，ipad和andriod設備上的手指作爲移動web啓用應用程序進行繪圖。由於移動設備也會自行觸發鼠標點擊事件：這是否意味着我應該檢測瀏覽器類型，並用觸摸綁定替換所有鼠標綁定，以防止事件發生雙重觸發？如何防止觸摸和鼠標事件之間的雙觸發

這是一個愚蠢的例子：

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

來源

2012-03-21 Homan

我用下面做你找什麼：

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

});

幾個百分點 - 你需要訪問爲了與targetTouches一起使用jQuery中的originalEvent。另外，正如我確信的那樣，您可以用鼠標事件替代您需要用於offsetX/Y的任何屬性對。

來源

2012-03-22 20:37:48 user631644

如何防止觸摸和鼠標事件之間的雙觸發

回答

相關問題