blob: 13faf6fea062a1e6ce75ad0cc24f5c04550e4697 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
---
title: Touch.clientX
slug: Web/API/Touch/clientX
tags:
- API
- DOM
- Property
- Read-only
- Reference
- touch
translation_of: Web/API/Touch/clientX
---
<p>{{ APIRef("Touch Events") }}</p>
<p><strong><code>Touch.clientY</code></strong> は読み取り専用プロパティで、タッチ点のビューポートからのスクロールオフセットは含まない相対 Y 座標を返します。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre class="syntaxbox notranslate"><var>touchItem</var>.clientY;</pre>
<h3 id="Return_value" name="Return_value">返値</h3>
<p><code>long</code> 値で、タッチ点のビューポートからのスクロールオフセットは含まない相対 Y 座標を表します。</p>
<h2 id="Example" name="Example">例</h2>
<p>この例では、 {{domxref("Touch")}} オブジェクトの {{domxref("Touch.clientX")}} および {{domxref("Touch.clientY")}} プロパティを使用しています。 {{domxref("Touch.clientX")}} プロパティは、ブラウザーのビューポートを基準としたタッチ点の水平座標で、スクロールオフセットを除きます。 {{domxref("Touch.clientY")}} プロパティは、ブラウザーのビューポートを基準としたタッチポイントの垂直座標で、スクロールオフセットを除きます。</p>
<p>この例では、 <code>source</code> という id の要素にタッチを開始し、要素内または要素外に移動した後、タッチ面から指を離したと仮定します。 {{domxref("Element/touchend_event", "touchend")}} のイベントハンドラーが呼び出されると、タッチ開始点から終了点までの {{domxref("Touch.clientX")}} 座標と {{domxref("Touch.clientY")}} 座標の変化が計算されます。</p>
<pre class="brush: js notranslate">// Register touchstart and touchend listeners for element 'source'
var src = document.getElementById("source");
var clientX, clientY;
src.addEventListener('touchstart', function(e) {
// Cache the client X/Y coordinates
clientX = e.touches[0].clientX;
clientY = e.touches[0].clientY;
}, false);
src.addEventListener('touchend', function(e) {
var deltaX, deltaY;
// Compute the change in X and Y coordinates.
// The first touch point in the changedTouches
// list is the touch point that was just removed from the surface.
deltaX = e.changedTouches[0].clientX - clientX;
deltaY = e.changedTouches[0].clientY - clientY;
// Process the data ...
}, false);</pre>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Touch Events 2','#dom-touch-clienty')}}</td>
<td>{{Spec2('Touch Events 2')}}</td>
<td>前の版から変更なし。</td>
</tr>
<tr>
<td>{{SpecName('Touch Events', '#widl-Touch-clientY')}}</td>
<td>{{Spec2('Touch Events')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("api.Touch.clientY")}}</p>
|
