1
デスクトップ用のマウスイベントを受け入れる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>