MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

TouchEvent と MouseEvent の両方をサポートする

touch インターフェースは、タッチできるデバイス 上で高いユーザーエクスペリエンスを生み出すアプリケーションを可能にします。しかし、ウェブコンテンツの大部分がマウス入力でだけ操作できるように設計されている現実があります。したがって、ブラウザがタッチをサポートしていても、マウス入力のみを想定したコンテンツを直接修正することなく従来通り動作させるために、ブラウザはまだマウスイベントをエミュレートしなくてはなりません。

理想的には、タッチベースのアプリケーションは、明示的にマウスの入力に対処する必要はありません。しかし、ブラウザはマウスイベントをエミュレートしなければならないので、処理しなければならない相互問題がいくつかあります。以下は開発者のためのイベントの動作と予期しない問題についての詳細です。

イベントの発火

タッチイベント標準は、タッチとマウスの動作に関するいくつかのブラウザ要件(詳細については Interaction with Mouse Events and click セクションを見てください)を定義しており、ブラウザは同じユーザー入力のレスポンスでタッチイベントとマウスイベントの両方を発火できると記述しています。このセクションでは、アプリケーションに影響を与える可能性がある要件について説明します。

ひとつのユーザー入力でブラウザがタッチイベントとマウスイベントの両方を発火した場合、ブラウザは何らかのマウスイベントの前に touchstart を発火させなくては なりません。したがって、アプリケーションで特定のタッチ target 要素でマウスイベントが発火させたくない場合、要素のタッチイベントハンドラーで preventDefault() を呼び出し追加のマウスイベントが送出されないようにしなければなりません。

touchmove イベントハンドラーで preventDefault() を呼び出すコードスニペットです。

// touchmove handler
function process_touchmove(ev) {
  // Call preventDefault() to prevent any further handling
  ev.preventDefault();
}

イベント順

特定のタッチイベントとマウスイベントの順序は実装依存ですが、標準仕様ではひとつの入力に対して次の順序が典型であるとしています。

  • touchstart
  • 指の動作に応じて 0、または複数の touchmove イベント
  • touchend
  • mousemove
  • mousedown
  • mouseup
  • click

touchstarttouchmovetouchend が動作の間にキャンセルされた場合、mouse か click は発火されず、続くイベントは次のものだけになります:

  • touchstart
  • 指の動作に応じて 0、または複数の touchmove イベント
  • touchend

コミュニティー

関連項目とリソース

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: YuichiNukiyama
 最終更新者: YuichiNukiyama,