今日は PointerEvent 周りを見ていくよ！
概要
- イベントの種類
- 実装
- まとめ
1. イベントの種類
まずブラウザーごとにいろいろあるんですけど、とりあえず IE11 から。IE11 は統合的な PointerEvent がサポートされていて、いわゆる PointerEvent を使える。これは MouseEvent (MouseEvent は UIEvent、UIEvent は Event を継承) を継承しています。また IE11 からは click, contextmenu, dblclick などのイベントオブジェクトも MouseEvent から PointerEvent になっています。継承モデルを採用していますから、既存実装との互換性はもちろん、新しい統合的な PointerEvent も使えます。
少し事情が違うのが IE10。実は W3C に Microsoft が提出したので、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. 他
ほかのブラウザーは基本的に筆圧とれないでおｋ。なのでイベントハンドリング方法として touch と mouse を処理するだけ。しかし Android のスタイラス機種は筆圧検知できるらしいですが、実機を持っていないのでテストすらできません。誰か教えてください。
OS X や Windows (古い) では wacom API によるペンイベントが取れますが、これも Windows の場合は使うことなんて皆無でしょうが、OS X ではあり得ると思うので今後暇があれば実装します。
2.4. 実装まとめ
基本的に、以上の点を守れば特に問題ないです。注意すべきことは TouchEvent は Event を継承しているだけで、UIEvent や MouseEvent を継承しているわけじゃないので、そのあたりハンドリングに注意してください、ってところ。
それはでこちらのコードをご覧ください。TypeScript です。
https://github.com/mntone/MntoneHtml5UIKit/blob/master/MntoneHtml5UIKit/mnuik/ts/Input/Pointer.ts
3. まとめ
ほかに高度なタッチイベント、ジェスチャーなども扱いたいのですが、このあたりになると難しいので… また今度ってことで。
ジェスチャーについてあんまり調べてないのですが、W3C 仕様ってあるんすかね？ GestureEvent あるのかな。このあたりもまた今度。
以上。
