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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
---
title: PointerEvent
slug: Web/API/PointerEvent
tags:
- API
- DOM
- Interface
- Pointer Events
- PointerEvent
- Reference
translation_of: Web/API/PointerEvent
---
<p>{{ APIRef("Pointer Events") }}</p>
<p><span class="seoSummary"><strong><code>PointerEvent</code></strong> インターフェイスは、接触点のジオメトリ、イベントを生成したデバイスタイプ、接触面に加えられた圧力の量など、ポインタによって生成された DOM イベントの状態を表します。</span></p>
<p><em>ポインタ</em>は、入力デバイス（マウス、ペン、またはタッチ対応面上の接触点など）のハードウェアにとらわれない表現です。 ポインタは、画面などの接触面上の特定の座標（または座標のセット）をターゲットにすることができます。</p>
<p>ポインタの<em>ヒットテスト</em>は、ブラウザーがポインタイベントのターゲット要素を決定するために使用するプロセスです。 通常、これはポインタの位置と、画面媒体上のドキュメント内の要素の視覚的なレイアウトを考慮して決定します。</p>
<h2 id="Constructors" name="Constructors">コンストラクタ</h2>
<dl>
<dt>{{domxref("PointerEvent.PointerEvent", "PointerEvent()")}}</dt>
<dd>信頼できない合成 <code>PointerEvent</code> を作成します。</dd>
</dl>
<h2 id="Properties" name="Properties">プロパティ</h2>
<p><em>このインターフェイスは、{{domxref("MouseEvent")}} および {{domxref("Event")}} からプロパティを継承します。</em></p>
<dl>
<dt>{{ domxref('PointerEvent.pointerId')}} {{readonlyInline}}</dt>
<dd>イベントの原因となっているポインタの一意の識別子。</dd>
<dt>{{ domxref('PointerEvent.width')}} {{readonlyInline}}</dt>
<dd>ポインタの接触ジオメトリの幅（X 軸の大きさ、CSS ピクセル単位）。</dd>
<dt>{{ domxref('PointerEvent.height')}} {{readonlyInline}}</dt>
<dd>ポインタの接触ジオメトリの高さ（Y 軸上の大きさ、CSS ピクセル単位）。</dd>
<dt>{{ domxref('PointerEvent.pressure')}} {{readonlyInline}}</dt>
<dd>0 から 1 の範囲のポインタ入力の正規化された圧力。 ここで、0 と 1 は、それぞれハードウェアが検出できる最小圧力と最大圧力を表します。</dd>
<dt>{{ domxref('PointerEvent.tangentialPressure')}} {{readonlyInline}}</dt>
<dd>ポインタ入力の正規化された接線圧力（バレル圧力またはシリンダー応力（<a href="https://en.wikipedia.org/wiki/Cylinder_stress">cylinder stress</a>）とも呼ばれます）は -1 から 1 の範囲で、0 はコントロールの中立位置です。</dd>
<dt>{{ domxref('PointerEvent.tiltX')}} {{readonlyInline}}</dt>
<dd>Y-Z 平面と、ポインタ（ペン/スタイラスなど）軸と Y 軸の両方を含む平面との間の平面角度（度単位、-90 から 90 の範囲）。</dd>
<dt>{{ domxref('PointerEvent.tiltY')}} {{readonlyInline}}</dt>
<dd>X-Z 平面と、ポインタ（ペン/スタイラスなど）軸と X 軸の両方を含む平面との間の平面角度（度単位、-90 から 90 の範囲）。</dd>
<dt>{{ domxref('PointerEvent.twist')}} {{readonlyInline}}</dt>
<dd>ポインタ（ペン/スタイラスなど）の長軸を中心とした時計回りの回転の度数（0 から 359の範囲の値）。</dd>
<dt>{{ domxref('PointerEvent.pointerType')}} {{readonlyInline}}</dt>
<dd>イベントの原因となったデバイスタイプ（マウス、ペン、タッチなど）を示します。</dd>
<dt>{{ domxref('PointerEvent.isPrimary')}} {{readonlyInline}}</dt>
<dd>ポインタがこのポインタタイプのプライマリポインタを表すかどうかを示します。</dd>
</dl>
<h2 id="Methods" name="Methods">メソッド</h2>
<dl>
<dt>{{ domxref('PointerEvent.getCoalescedEvents()')}} {{deprecated_inline}}</dt>
<dd>送出された {{event("pointermove")}} イベントに合体したすべての <code>PointerEvent</code> インスタンスのシーケンスを返します。</dd>
</dl>
<h2 id="Pointer_event_types" name="Pointer_event_types">ポインタイベントタイプ</h2>
<p><code>PointerEvent</code> インターフェイスにはいくつかのイベントタイプがあります。 どのイベントが発生したかを判断するには、イベントの {{ domxref("Event.type", "type") }} プロパティを調べます。</p>
<div class="note"><strong>注</strong>: 多くの場合、ポインタとマウスの両方のイベントが送信されることに注意することが重要です（ポインタ固有でないコードでもユーザーと対話できるようにするため）。 ポインタイベントを使用する場合は、{{ domxref("event.preventDefault()") }} を呼び出してマウスイベントも送信されないようにする必要があります。</div>
<dl>
<dt>{{event('pointerover')}}</dt>
<dd>このイベントは、ポインティングデバイスが要素のヒットテスト境界内に移動したときに発生します。</dd>
<dt>{{event('pointerenter')}}</dt>
<dd>このイベントは、ポインティングデバイスが要素またはその子孫の1つのヒットテスト境界内に移動したときに発生します。 これには、ホバーをサポートしないデバイスからの <code>pointerdown</code> イベントの結果も含まれます（<code>pointerdown </code>を参照）。 このイベントタイプは <code>pointerover</code> に似ていますが、バブリングしないという点で異なります。</dd>
<dt>{{event('pointerdown')}}</dt>
<dd>このイベントは、ポインタが<em>アクティブ</em>になると発生します。 マウスの場合、ボタンが押されていない状態から少なくとも1つのボタンが押された状態に移行したときに発生します。 タッチの場合、物理的な接触がデジタイザとなされたときに発生します。 ペンの場合、スタイラスがデジタイザと物理的に接触したときに発生します。</dd>
<dt>{{event('pointermove')}}</dt>
<dd>このイベントは、ポインタが座標を変更したときに発生します。</dd>
<dt>{{event('pointerup')}}</dt>
<dd>このイベントは、ポインタが<em>アクティブ</em>でなくなったときに発生します。</dd>
<dt>{{event('pointercancel')}}</dt>
<dd>ブラウザーは、ポインタがイベントを生成できなくなったと判断した場合（例えば、関連するデバイスが無効になった場合）、このイベントを発生させます。</dd>
<dt>{{event('pointerout')}}</dt>
<dd>このイベントは、次のようないくつかの理由で発生します。 ポインティングデバイスが要素のヒットテスト境界外に移動した。 ホバーをサポートしていないデバイスの <code>pointerup</code> イベントが発生した（<code>pointerup</code> を参照）。 <code>pointercancel</code> イベントの発生後（<code>pointercancel</code> を参照）。 ペン/スタイラスがデジタイザで検出可能なホバー範囲を離脱したとき。</dd>
<dt>{{event('pointerleave')}}</dt>
<dd>このイベントは、ポインティングデバイスが要素のヒットテスト境界外に移動したときに発生します。 ペンデバイスの場合、このイベントは、スタイラスがデジタイザで検出可能なホバー範囲を離脱したときに発生します。</dd>
<dt>{{event('gotpointercapture')}}</dt>
<dd>このイベントは、要素がポインタキャプチャを受け取ったときに発生します。</dd>
<dt>{{event('lostpointercapture')}}</dt>
<dd>このイベントは、ポインタに対するポインタキャプチャが解放された後に発生します。</dd>
</dl>
<h2 id="GlobalEventHandlers" name="GlobalEventHandlers">GlobalEventHandlers</h2>
<dl>
<dt>{{ domxref('GlobalEventHandlers.onpointerover') }}</dt>
<dd>{{event('pointerover')}} イベントのための{{domxref('GlobalEventHandlers','グローバルイベントハンドラ')}}。</dd>
<dt>{{ domxref('GlobalEventHandlers.onpointerenter') }}</dt>
<dd>{{event('pointerenter')}} イベントのための{{domxref('GlobalEventHandlers','グローバルイベントハンドラ')}}。</dd>
<dt>{{ domxref('GlobalEventHandlers.onpointerdown') }}</dt>
<dd>{{event('pointerdown')}} イベントのための{{domxref('GlobalEventHandlers','グローバルイベントハンドラ')}}。</dd>
<dt>{{ domxref('GlobalEventHandlers.onpointermove') }}</dt>
<dd>{{event('pointermove')}} イベントのための{{domxref('GlobalEventHandlers','グローバルイベントハンドラ')}}。</dd>
<dt>{{ domxref('GlobalEventHandlers.onpointerup') }}</dt>
<dd>{{event('pointerup')}} イベントのための{{domxref('GlobalEventHandlers','グローバルイベントハンドラ')}}。</dd>
<dt>{{ domxref('GlobalEventHandlers.onpointercancel') }}</dt>
<dd>{{event('pointercancel')}} イベントのための{{domxref('GlobalEventHandlers','グローバルイベントハンドラ')}}。</dd>
<dt>{{ domxref('GlobalEventHandlers.onpointerout') }}</dt>
<dd> {{event('pointerout')}} イベントのための{{domxref('GlobalEventHandlers','グローバルイベントハンドラ')}}。</dd>
<dt>{{ domxref('GlobalEventHandlers.onpointerleave') }}</dt>
<dd>{{event('pointerleave')}} イベントのための{{domxref('GlobalEventHandlers','グローバルイベントハンドラ')}}。</dd>
</dl>
<h2 id="Example" name="Example">例</h2>
<p>各プロパティ、イベントタイプ、およびグローバルイベントハンドラの例は、それぞれの参照ページに含まれています。</p>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">仕様</th>
<th scope="col">状態</th>
<th scope="col">コメント</th>
</tr>
<tr>
<td>{{SpecName('Pointer Events 2 Ext','#extensions-to-the-pointerevent-interface', 'PointerEvent')}}</td>
<td>{{Spec2('Pointer Events 2 Ext')}}</td>
<td>{{DOMxRef('PointerEvent.getCoalescedEvents()', 'getCoalescedEvents()')}} メソッドを追加しました。</td>
</tr>
<tr>
<td>{{SpecName('Pointer Events 2','#pointerevent-interface', 'PointerEvent')}}</td>
<td>{{Spec2('Pointer Events 2')}}</td>
<td>{{DOMxRef('PointerEvent.twist', 'twist')}} プロパティと {{DOMxRef('PointerEvent.tangentialPressure', 'tangentialPressure')}} プロパティを追加しました。</td>
</tr>
<tr>
<td>{{SpecName('Pointer Events', '#pointerevent-interface', 'PointerEvent')}}</td>
<td>{{Spec2('Pointer Events')}}</td>
<td>初期定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<p>{{Compat("api.PointerEvent")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li>{{ domxref("Touch_events","Touch Events") }}</li>
<li>{{ domxref("GestureEvent") }}</li>
<li>{{ domxref("MSGestureEvent") }}</li>
<li>{{cssxref("touch-action")}}</li>
</ul>
|
