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
|
---
title: Element.setPointerCapture()
slug: Web/API/Element/setPointerCapture
tags:
- API
- Capture
- DOM
- Element
- Méthodes
- Pointeur
translation_of: Web/API/Element/setPointerCapture
---
<p>{{APIRef("DOM")}}</p>
<p>La <em>Pointer capture</em> (<em>capture de pointeur</em>) permet de re-cibler des événements pour un événement de pointeur particulier ({{domxref ("PointerEvent")}}) vers un élément particulier au lieu de la cible normale à l'emplacement d'un pointeur. Cela peut être utilisé pour garantir qu'un élément continue à recevoir des événements de pointeur même si le contact du périphérique de pointeur se déplace hors de l'élément (par exemple en faisant défiler).</p>
<p><strong><code>setPointerCapture()</code></strong> est la méthode de l'interface {{domxref("Element")}} utilisée pour désigner un élément spécifique comme <em>cible de capture</em> de{{domxref("PointerEvent", "évènements de pointeur")}} futurs. Les évènements subséquents du pointeur seront reciblés sur l'élément jusqu'à la libération de la capture (via {{domxref("Element.releasePointerCapture")}}).</p>
<div class="note">Lorque la capture du pointeur est définie, les évènements {{domxref("PointerEvent.pointerover","pointerover")}}, {{domxref("PointerEvent.pointerout","pointerout")}} {{domxref("PointerEvent.pointerenter","pointerenter")}} et {{domxref("PointerEvent.pointerleave","pointerleave")}} sont uniquement générés lors du franchissement de la limite de l'élément dont la capture est définie, car les autres éléments ne peuvent plus être ciblés par le pointeur. Cela a pour effet de supprimer ces événements sur tous les autres éléments.</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">targetElement.<em>setPointerCapture</em>(pointerId);
</pre>
<h3 id="Arguments">Arguments</h3>
<dl>
<dt><em>pointerId</em></dt>
<dd>L'{{domxref("PointerEvent.pointerId","identifiant")}} pour un {{domxref("PointerEvent","évènement de pointeur")}}.</dd>
</dl>
<h3 id="Valeur_de_retour">Valeur de retour</h3>
<p>Cette méthode renvoie <code>void</code> et lance une {{domxref("DOMException")}} nommée <code>InvalidPointerId</code> si <code>pointerId</code> ne correspond à aucun des pointeurs actifs.</p>
<h2 id="Exemple">Exemple</h2>
<pre class="brush: js"><html>
<script>
function downHandler(ev) {
var el=document.getElementById("target");
//L'élément cible ('target') recevra/capturera d'autres évènements
el.setPointerCapture(ev.pointerId);
}
function init() {
var el=document.getElementById("target");
el.onpointerdown = downHandler;
}
</script>
<body onload="init();">
<div id="target"> Touch me ... </div>
</body>
</html>
</pre>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</th>
</tr>
<tr>
<td>{{SpecName('Pointer Events 2','#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}</td>
<td>{{Spec2('Pointer Events 2')}}</td>
<td>Version non stable.</td>
</tr>
<tr>
<td>{{SpecName('Pointer Events', '#widl-Element-setPointerCapture-void-long-pointerId', 'setPointerCapture')}}</td>
<td>{{Spec2('Pointer Events')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatChrome("35")}}<sup>[1]</sup></td>
<td>{{CompatGeckoDesktop(59)}}</td>
<td>10 {{property_prefix("-ms")}}<br>
11</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Fonctionnalité</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatChrome("35")}}<sup>[1]</sup></td>
<td>{{CompatGeckoMobile("29")}}<sup>[2]</sup></td>
<td>10 {{property_prefix("-ms")}}<br>
11</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Pris en charge dans <a href="http://crbug.com/248918">bug 248918</a>.</p>
<p>[2] Supporté avec la préférence <code>dom.w3c_pointer_events.enabled</code> par défaut à <code>false</code> (<em>faux</em>).</p>
<p> </p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{ domxref("Element.releasePointerCapture")}}</li>
<li>{{ domxref("Pointer_events","Pointer Events") }}</li>
</ul>
|
