Touch: pageX プロパティ
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Touch.pageX
は読み取り専用プロパティで、スクロールオフセットを加味した、ビューポートに対するタッチ点の X 座標を返します。
値
double
型の浮動小数点数で、スクロールオフセットを加味した、ビューポートに対するタッチ点の X 座標を表します。
例
この例では、 Touch
オブジェクトの Touch.pageX
および Touch.pageY
プロパティへのアクセス方法を示しています。 Touch.pageX
プロパティは、ビューポートを基準としたタッチ点の水平座標(CSS ピクセル単位)で、スクロールオフセットを加味したものです。 Touch.pageY
プロパティは、ブラウザーのビューポートを基準としたタッチ点の垂直座標(CSS ピクセル単位)で、スクロールオフセットを加味したものです。
以下の単純なコードスニペットでは、ユーザーが source
要素に 1 つ以上のタッチ接触を開始し、タッチ点を移動させた後、表面との接触をすべて解除することを想定しています。 touchmove
イベントハンドラーが呼び出されると、各タッチ点の Touch.pageX
と Touch.pageY
の各座標がイベントの TouchEvent.changedTouches
リスト経由でアクセスされます。
// 'source' 要素に touchmove リスナーを登録する
const src = document.getElementById("source");
src.addEventListener(
"touchmove",
(e) => {
// 移動されたタッチ点を反復処理し、各 pageX/Y 座標をログ出力する。
// 各座標は CSS ピクセル単位。
for (let i = 0; i < e.changedTouches.length; i++) {
console.log(`touchpoint[${i}].pageX = ${e.changedTouches[i].pageX}`);
console.log(`touchpoint[${i}].pageY = ${e.changedTouches[i].pageY}`);
}
},
false,
);
仕様書
Specification |
---|
Touch Events # dom-touch-pagex |
ブラウザーの互換性
BCD tables only load in the browser