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…