このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
Touch: pageY プロパティ
利用可能性は限定的
この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。
Want more support for this feature? Tell us why.
Touch.pageY は読み取り専用プロパティで、スクロールオフセットを加味した、ビューポートに対するタッチ点の Y 座標を返します。
値
double 型の浮動小数点数で、スクロールオフセットを加味した、ビューポートに対するタッチ点の Y 座標を表します。
例
この例では、 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,
);
仕様書
| 仕様書 |
|---|
| Touch Events # dom-touch-pagey |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。