• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

W3C

Touch Events

Top / Touch Events

http://www.w3.org/TR/touch-events/

JavaScript/イベント

• 引数のイベントオブジェクトはTouchEvent型
• touchstart
• touchmove
• touchend?
• touchcancel?

例

var obj = document.getElementById('id');
obj.addEventListener('touchmove', function(event) {
  // If there's exactly one finger inside this element
  if (event.targetTouches.length == 1) {
    var touch = event.targetTouches[0];
    // Place element where the finger is
    obj.style.left = touch.pageX + 'px';
    obj.style.top = touch.pageY + 'px';
  }
}, false);

クラス

TouchEvent

• 型	メンバ	イベントオブジェクト	説明
  TouchList	TouchEvent.touches?	event.touches?	現在画面上にあるすべての指のリスト
  TouchList	TouchEvent.targetTouches	event.targetTouches	現在の DOM 要素上にある指のリスト
  TouchList	TouchEvent.changedTouches?	event.changedTouches?	現在のイベントに関与している指のリスト
  boolean	TouchEvent.altKey?	event.altKey?
  boolean	TouchEvent.metaKey?	event.metaKey?
  boolean	TouchEvent.ctrlKey?	event.ctrlKey?
  boolean	TouchEvent.shiftKey?	event.shiftKey?
  boolean	TouchEvent.metaKey?	event.metaKey?
  EventTarget	TouchEvent.relatedTarget?	event.relatedTarget?

TouchList

Touch

• clientX: クライアント領域（viewport）に対するX座標
• clientY: クライアント領域（viewport）に対するY座標
• screenX: 画面の表示領域に対する指のX座標
• screenY: 画面の表示領域に対する指のX座標
• pageX: ページ全体に対する指のX座標（スクロールを必要とする領域も含む、ということです）
• pageY: ページ全体に対する指のX座標
• target: タッチイベントが発生したノード
• identifier: それぞれのタッチイベントに対する、ユニークな値

対応

• Firefox
  • Firefox 4 - 部分対応
  • Firefox 18? - 対応
  • Firefox 25 - デフォルトだと無効
• Edge
• Google Chrome 22?
  • Chrome for Android
• Opera 15?
• Mobile Safari 3.2?
• Android Browser 2.1?

メモ

• touch, mouse 両方のイベントに反応することがある。
• touchが先でmouseが後。
• touchでpreventDefaultするとmouseは発行しない。

参考

• http://www.html5rocks.com/ja/mobile/touch/

関連

• Pointer Events
• Webブラウザ/マルチタッチ