最終更新:2015-07-07 (火) 12:42:42 (1859d)  

Touch Events
Top / Touch Events

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

JavaScript/イベント

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

Touch

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

対応

メモ

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

参考

関連