読者です 読者をやめる 読者になる 読者になる

モノトーンの伝説日記

OBS Studio と Blackmagic Design が大好き。

HTML5 の話。PointerEvent / MouseEvent / TouchEvent について

 今日は PointerEvent 周りを見ていくよ!

概要

  1. イベントの種類
  2. 実装
  3. まとめ

1. イベントの種類

 まずブラウザーごとにいろいろあるんですけど、とりあえず IE11 から。IE11 は統合的な PointerEvent がサポートされていて、いわゆる PointerEvent を使える。これは MouseEvent (MouseEventUIEventUIEventEvent を継承) を継承しています。また IE11 からは click, contextmenu, dblclick などのイベントオブジェクトも MouseEvent から PointerEvent になっています。継承モデルを採用していますから、既存実装との互換性はもちろん、新しい統合的な PointerEvent も使えます。

 少し事情が違うのが IE10。実は W3CMicrosoft が提出したので、W3C とほとんど変わりませんが、vender prefix が必要です。一部違うところがあって、PointerEvent.pointerType が long 型になっています。これは最新 (IE11 も含む) では string 型に変更になっています。

 他のプラットフォームでは mouse と touch を使います。touch と mouse は対になってて、touch が優先的に fire され、次に mouse が fire されます。なので、touch でイベントを処理したら、mouse 側で処理を回避するように実装します。

2. 実装

 俺のコード (MNKit) に実装自体はあるので簡単に書いておきます。

2.1. IE11

 基本的に簡単です。イベントフックるだけです。

2.2. IE10

 最新実装と違うところとして、最新実装では pressure が無効な場合は 0、pressure という概念がそもそもないマウスなどは押していないときは 0、押しているときは 0.5 になる模様 (なぜ 0.5 なんだろう。世の中の大半、ペイントなどの都合を考えると 1 がよさそうなのだが…)。

2.3. 他

 ほかのブラウザーは基本的に筆圧とれないでおk。なのでイベントハンドリング方法として touch と mouse を処理するだけ。しかし Androidスタイラス機種は筆圧検知できるらしいですが、実機を持っていないのでテストすらできません。誰か教えてください。

 OS XWindows (古い) では wacom API によるペンイベントが取れますが、これも Windows の場合は使うことなんて皆無でしょうが、OS X ではあり得ると思うので今後暇があれば実装します。

2.4. 実装まとめ

 基本的に、以上の点を守れば特に問題ないです。注意すべきことは TouchEventEvent を継承しているだけで、UIEventMouseEvent を継承しているわけじゃないので、そのあたりハンドリングに注意してください、ってところ。

 それはでこちらのコードをご覧ください。TypeScript です。

https://github.com/mntone/MntoneHtml5UIKit/blob/master/MntoneHtml5UIKit/mnuik/ts/Input/Pointer.ts

3. まとめ

 ほかに高度なタッチイベント、ジェスチャーなども扱いたいのですが、このあたりになると難しいので… また今度ってことで。

 ジェスチャーについてあんまり調べてないのですが、W3C 仕様ってあるんすかね? GestureEvent あるのかな。このあたりもまた今度。

 以上。