nayucolony

勉強したこととか

touchstartをイベントハンドラとした時のpageX,pageYプロパティへのアクセス方法

イベントハンドラmousedownのときとtouchstartの時で引数に渡されるオブジェクトが異なるというメモ。

mousedownのときに渡されるオブジェクト

MouseEventオブジェクトが渡される。

目的のpageXpageYプロパティは直下にあるので

e.pageX
e.pageY

でアクセスできる。

MouseEvent - Web API インターフェイス | MDN

touchstartのときに渡されるオブジェクト

TouchEventオブジェクトが渡される。

TouchEvent - Web API インターフェイス | MDN

場合によってはMouseEventも渡されるっぽいが、あらゆる場合で渡されるのかは未調査。

MouseEventオブジェクトとは違い、pageXpageYプロパティは直下には存在しない。 ではどこにあるのかというと、TouchEventオブジェクトのchangedTouchesプロパティの中だ。

TouchEvent.changedTouches - Web API インターフェイス | MDN

ここにtouchListというオブジェクトが格納されている。

TouchList - Web API インターフェイス | MDN

touchListオブジェクトの中には0というプロパティ名でTouchオブジェクトが格納されている。 この中にpageXpageYが入っている。

Touch - Web API インターフェイス | MDN

そのため、アクセスするには以下のように記述すればOK。

e.changedTouches[0].pageX
e.changedTouches[0].pageY

オブジェクトのプロパティへアクセスする際の注意事項

JavaSctiptでは、ブラケット表記法でオブジェクトのプロパティにアクセスする際に数値をいれても文字列として扱われる。 ブラケット表記法には式の評価を行うプロセスがあり、その際にtoStringメソッドを経由するので、強制的に文字列型への変換がかかるためである。

メンバー演算子 - JavaScript | MDN

一方、ドット表記法はそのプロセスは存在しない。 したがってe.changedTouches.0のような表記は使えないので注意。

これらについては別記事でまとめてあるのできになる場合はそちらで確認してほしい。

変数をキーとしてオブジェクトのプロパティを参照する際はブラケット表記法を使う。 - nayucolony

関連

今回のエントリの内容は以下のサンプルコードに登場します。

弾力のあるヘッダ - Vue.js JSFiddle