TouchEvent と MouseEvent の両方をサポートする
touch インターフェースは、タッチできるデバイス 上で高いユーザーエクスペリエンスを生み出すアプリケーションを可能にします。しかし、ウェブコンテンツの大部分がマウス入力でだけ操作できるように設計されている現実があります。したがって、ブラウザがタッチをサポートしていても、マウス入力のみを想定したコンテンツを直接修正することなく従来通り動作させるために、ブラウザはまだマウスイベントをエミュレートしなくてはなりません。
理想的には、タッチベースのアプリケーションは、明示的にマウスの入力に対処する必要はありません。しかし、ブラウザはマウスイベントをエミュレートしなければならないので、処理しなければならない相互問題がいくつかあります。以下は開発者のためのイベントの動作と予期しない問題についての詳細です。
イベントの発火
タッチイベント標準は、タッチとマウスの動作に関するいくつかのブラウザ要件（詳細については Interaction with Mouse Events and click セクションを見てください）を定義しており、ブラウザは同じユーザー入力のレスポンスでタッチイベントとマウスイベントの両方を発火できると記述しています。このセクションでは、アプリケーションに影響を与える可能性がある要件について説明します。
ひとつのユーザー入力でブラウザがタッチイベントとマウスイベントの両方を発火した場合、ブラウザは何らかのマウスイベントの前に touchstart (en-US) を発火させなくては なりません。したがって、アプリケーションで特定のタッチ target (en-US) 要素でマウスイベントが発火させたくない場合、要素のタッチイベントハンドラーで preventDefault() を呼び出し追加のマウスイベントが送出されないようにしなければなりません。
touchmove (en-US) イベントハンドラーで preventDefault() を呼び出すコードスニペットです。
// touchmove handler
function process_touchmove(ev) {
// Call preventDefault() to prevent any further handling
ev.preventDefault();
}
イベント順
特定のタッチイベントとマウスイベントの順序は実装依存ですが、標準仕様ではひとつの入力に対して次の順序が典型であるとしています。
touchstart- 指の動作に応じて 0、または複数の
touchmoveイベント touchendmousemovemousedownmouseupclick
touchstart (en-US) か touchmove (en-US)、touchend (en-US) が動作の間にキャンセルされた場合、mouse か click は発火されず、続くイベントは次のものだけになります：
touchstart- 指の動作に応じて 0、または複数の
touchmoveイベント touchend