Touch: clientX プロパティ
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Touch.clientX は読み取り専用プロパティで、スクロールオフセットを含まない、ビューポートに対するタッチ点の X 座標を返します。
値
double 型の浮動小数点数で、スクロールオフセットを含まない、ビューポートに対するタッチ点の X 座標を表します。
例
この例では、 Touch オブジェクトの Touch.clientX および Touch.clientY プロパティを使用しています。 Touch.clientX プロパティは、ブラウザーのビューポートを基準としたタッチ点の水平座標で、スクロールオフセットを除いたものです。 Touch.clientY プロパティは、ブラウザーのビューポートを基準としたタッチ点の垂直座標で、スクロールオフセットを除いたものです。
この例では、 source という id の要素にタッチを開始し、要素内または要素外に移動した後、タッチ面から指を離したと仮定します。 touchend のイベントハンドラーが呼び出されると、タッチ開始点から終了点までの Touch.clientX 座標と Touch.clientY 座標の変化が計算されます。
js
// 要素 'source' に touchstart リスナーと touchend リスナーを登録
const src = document.getElementById("source");
let clientX;
let clientY;
src.addEventListener(
"touchstart",
(e) => {
// クライアント X/Y 座標をキャッシュ
clientX = e.touches[0].clientX;
clientY = e.touches[0].clientY;
},
false,
);
src.addEventListener(
"touchend",
(e) => {
let deltaX;
let deltaY;
// X 座標と Y 座標の変化を計算
// changedTouches リストの最初のタッチ点は、
// 面から除去されたタッチ点です。
deltaX = e.changedTouches[0].clientX - clientX;
deltaY = e.changedTouches[0].clientY - clientY;
// データを処理…
},
false,
);
仕様書
| Specification |
|---|
| Touch Events # dom-touch-clientx |
ブラウザーの互換性
Loading…