javascript - HTML 5 キャンバス: 長いクリックを検出する

Question

HTML5キャンバスの描画に取り組んでいます。描画アプリケーションは iPad WebApp です。

キャンバス上でロングタップ（タップアンドホールド）を追跡し、それをキャンバス外のイベントにリンクする可能性があるかどうかを知りたいです。例: キャンバス上で 3 秒間タップしたままにすると、ポップアップが表示されます。

Answer 1

​&lt;canvas id="myCanvas"></canvas>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

キャンバスのイベントでタイムアウトを設定し、mousedownイベントでそれをクリアするだけmouseupです。

デモはこちら

​var canvas = document.getElementById('myCanvas');
var timer = null;

​canvas.onmousedown = function(){
  timer = setTimeout( doStuff, 2000 );
};

canvas.onmouseup = function(){
  clearTimeout( timer );
};

function doStuff() {
  alert('hello, you just pressed the mousebutton for two seconds.')
}

Answer 2

Hammer.jsを使用して、"hold" イベントをリッスンできます。