Webページにおいてクリック時とタッチ時に発火するイベントを実際に確認する

モバイルデバイスでWebページ上でタッチしたとき、MouseEventも発生しているという話を見掛けたので、自分のサイトを使って、DevToolsのコンソールで以下のコードを実行することでイベントリスナーを登録して、発火するイベントを見てみる。

const types = ['pointerdown', 'pointerup', 'touchstart', 'touchend', 'mousedown', 'mouseup', 'click'];
types.forEach(t =>
  window.addEventListener(t, e => {
    console.log(`${e.type.padEnd(12)} ${e.constructor.name.padEnd(12)} ${e.pointerType ?? '-'}`);
  }, { capture: true })
);

これで、コンソールにイベントの種類、イベントのインターフェイス名、イベントのpointerTypeが出力される。

クリックしたとき

ページの表示領域をマウスで左クリックした時のログは以下の通り。

pointerdown  PointerEvent mouse
mousedown    MouseEvent   -
pointerup    PointerEvent mouse
mouseup      MouseEvent   -
click        PointerEvent mouse

pointerdown->mousedown->pointerup->mouseup->clickの順にイベントが発火していることが分かる。そして、単にクリックされたら何かしたいときはclickを使えばよいということが推測できる。

また、clickはPointerEventになっている（MouseEventじゃないんだ……）。そして、pointerTypeはmouseとなっている。

<button>などにフォーカスしてキーボードのEnterやSpaceを押したときにもclickは発火するらしいので、これも試してみる。

NOTE

コンソールの設定のPreserve logを有効にしておかないと、画面遷移したときにログが消えるので注意。

click        PointerEvent

確かに、clickのみが発火した。そして、pointerTypeは-が表示されていないので、空文字であることが分かる。

タッチしたとき

DevToolsのデバイスモードでデバイスの種類をモバイルにして、ページの表示領域をマウスで左クリックしたとき（これでタッチ時のイベントが発生するはず）のログは以下の通り。

pointerdown  PointerEvent touch
touchstart   TouchEvent   -
pointerup    PointerEvent touch
touchend     TouchEvent   -
mousedown    MouseEvent   -
mouseup      MouseEvent   -
click        PointerEvent touch

pointerdown->touchstart->pointerup->touchend->mousedown->mouseup->clickの順にイベントが発火している。 MouseEventとTouchEventとPointerEventの3種類があるのか……。

mousedownとmouseupが発火している所が、マウス前提のサイトのための互換用のイベントということか。

NOTE

タッチ向けに設計されていないWebコンテンツの互換性のために一度の入力でタッチイベントとマウスイベントの両方を送出「してもよい」ことがW3Cのドキュメントに書かれている。ただ、「してもよい（may）」なので、互換用のマウスイベントを送出しないブラウザもあるかもしれないという前提で実装するのが安全ということになりそう。

pointerTypeはtouchとなっている。 clickはデバイスが何であってもPointerEventであり、デバイスを区別したい場合はpointerTypeを見ればよい、というように整理されている。

参考資料

Touch Events - Level 2