touchstartをイベントハンドラとした時のpageX,pageYプロパティへのアクセス方法
イベントハンドラがmousedown
のときとtouchstart
の時で引数に渡されるオブジェクトが異なるというメモ。
mousedownのときに渡されるオブジェクト
MouseEvent
オブジェクトが渡される。
目的のpageX
、pageY
プロパティは直下にあるので
e.pageX e.pageY
でアクセスできる。
MouseEvent - Web API インターフェイス | MDN
touchstartのときに渡されるオブジェクト
TouchEvent
オブジェクトが渡される。
TouchEvent - Web API インターフェイス | MDN
場合によってはMouseEvent
も渡されるっぽいが、あらゆる場合で渡されるのかは未調査。
MouseEvent
オブジェクトとは違い、pageX
、pageY
プロパティは直下には存在しない。
ではどこにあるのかというと、TouchEvent
オブジェクトのchangedTouches
プロパティの中だ。
TouchEvent.changedTouches - Web API インターフェイス | MDN
ここにtouchList
というオブジェクトが格納されている。
TouchList - Web API インターフェイス | MDN
touchList
オブジェクトの中には0
というプロパティ名でTouch
オブジェクトが格納されている。
この中にpageX
やpageY
が入っている。
Touch - Web API インターフェイス | MDN
そのため、アクセスするには以下のように記述すればOK。
e.changedTouches[0].pageX e.changedTouches[0].pageY
オブジェクトのプロパティへアクセスする際の注意事項
JavaSctiptでは、ブラケット表記法でオブジェクトのプロパティにアクセスする際に数値をいれても文字列として扱われる。
ブラケット表記法には式の評価を行うプロセスがあり、その際にtoString
メソッドを経由するので、強制的に文字列型への変換がかかるためである。
一方、ドット表記法はそのプロセスは存在しない。
したがってe.changedTouches.0
のような表記は使えないので注意。
これらについては別記事でまとめてあるのできになる場合はそちらで確認してほしい。
変数をキーとしてオブジェクトのプロパティを参照する際はブラケット表記法を使う。 - nayucolony
関連
今回のエントリの内容は以下のサンプルコードに登場します。