Webアプリでマルチタッチ

プログラミング

HTML5+JavaScriptでマルチタッチを取得する実験。
なるほど。マウスでは発生しないタッチ特有のイベントがあるのね。指が触れたとき、動いたとき、離れたときに各タッチのIDと座標がイベントから得られるのはAndroidアプリやiOSアプリと基本的に同じ考え方。

  • touchstart : 指が触れたとき
  • touchmove : 指が動いたとき
  • touchend : 指が離れたとき

下記のページにPCのブラウザからアクセスしてマウスでクリックやドラッグしても何も起こらない。スマホのブラウザからアクセスして赤い枠線内をタッチするとIDと座標が表示される。

<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>Touch Event</title>
<meta name="viewport" content="width=device-width">
<style> canvas{ border: solid 1px red; } </style>
</head>
<body>
<canvas id="my canvas" width="300" height="300"></canvas>
<div id="monitor"></div>
<script>
var my_canvas = document.getElementById("my canvas");

// 指が触れたとき
my_canvas.addEventListener("touchstart" , touch_monitor);
// 指が動いたとき
my_canvas.addEventListener("touchmove" , touch_monitor);
// 指が離れたとき
my_canvas.addEventListener("touchend" , touch_monitor);

// 各タッチの座標を表示
function touch_monitor(e) {
  e.preventDefault(); // デフォルトイベントをキャンセル
  var s = "";
  for (var i = 0; i < e.touches.length; i++){
    var t = e.touches[i];
    s += "[" + t.identifier + "]";
    s += "x=" + t.pageX + ",";
    s += "y=" + t.pageY + "<br>";
  }
  document.getElementById("monitor").innerHTML = s;
}

</script>
</body></html>