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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
|
---
title: mousedown
slug: Web/API/Element/mousedown_event
tags:
- API
- DOM
- Event
- Interface
- NeedsSpecTable
- Referentie
translation_of: Web/API/Element/mousedown_event
original_slug: Web/Events/mousedown
---
<div>Het <code>mousedown </code>event wordt opgeworpen wanneer de knop van een aanwijs device wordt ingedrukt op een element.</div>
<h2 id="Algemene_info">Algemene info</h2>
<dl>
<dt style="float: left; text-align: right; width: 120px;">Specificatie</dt>
<dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3</a></dd>
<dt style="float: left; text-align: right; width: 120px;">Interface</dt>
<dd style="margin: 0 0 0 120px;">{{domxref("MouseEvent")}}</dd>
<dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
<dd style="margin: 0 0 0 120px;">Ja</dd>
<dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
<dd style="margin: 0 0 0 120px;">Ja</dd>
<dt style="float: left; text-align: right; width: 120px;">Doel</dt>
<dd style="margin: 0 0 0 120px;">Element</dd>
<dt style="float: left; text-align: right; width: 120px;">Default Actie</dt>
<dd style="margin: 0 0 0 120px;">Varieert: Start een drag/drop operatie; start een text selectie; start een scroll/pan interactie (in combinatie met de middelste muisknop, indien ondersteund)</dd>
</dl>
<h2 id="Eigenschappen">Eigenschappen</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Eigenschap</th>
<th scope="col">Type</th>
<th scope="col">Beschrijving</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>target</code> {{readonlyInline}}</td>
<td>{{domxref("EventTarget")}}</td>
<td>Het event target (het hoogste target in de DOM boom).</td>
</tr>
<tr>
<td><code>type</code> {{readonlyInline}}</td>
<td>{{domxref("DOMString")}}</td>
<td>Het type van het event.</td>
</tr>
<tr>
<td><code>bubbles</code> {{readonlyInline}}</td>
<td>Boolean</td>
<td>Of het event normaalgezien bubblet of niet</td>
</tr>
<tr>
<td><code>cancelable</code> {{readonlyInline}}</td>
<td><code>Boolean</code></td>
<td>Kan het event gecancellet worden of niet?</td>
</tr>
<tr>
<td><code>view</code> {{readonlyInline}}</td>
<td>{{domxref("WindowProxy")}}</td>
<td>{{domxref("document.defaultView")}} (<code>window</code> van het document)</td>
</tr>
<tr>
<td><code>detail</code> {{readonlyInline}}</td>
<td><code>long</code> (<code>float</code>)</td>
<td>Het aantal opeenvolgende clicks in een kort inerval, plus een.</td>
</tr>
<tr>
<td><code>currentTarget</code> {{readonlyInline}}</td>
<td>{{domxref("EventTarget")}}</td>
<td>De node waar de event listener aan hangt.</td>
</tr>
<tr>
<td><code>relatedTarget</code> {{readonlyInline}}</td>
<td>{{domxref("EventTarget")}}</td>
<td>Voor <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> en <code>mouseleave</code> events: target van het complementaire event (<code>mouseleave</code> target in het geval van een <code>mouseenter</code> event). <code>null</code> anders.</td>
</tr>
<tr>
<td><code>screenX</code> {{readonlyInline}}</td>
<td>long</td>
<td>De X coordinaat van de muiscursor in globale (scherm) coordinaten.</td>
</tr>
<tr>
<td><code>screenY</code> {{readonlyInline}}</td>
<td>long</td>
<td>De Y coordinaat van de muiscursor in globale (scherm) coordinaten.</td>
</tr>
<tr>
<td><code>clientX</code> {{readonlyInline}}</td>
<td>long</td>
<td>De X coordinaat van de muiscursor in lokale (DOM inhoud) coordinaten.</td>
</tr>
<tr>
<td><code>clientY</code> {{readonlyInline}}</td>
<td>long</td>
<td>De Y coordinaat van de muiscursor in lokale (DOM inhoud) coordinaten.</td>
</tr>
<tr>
<td><code>button</code> {{readonlyInline}}</td>
<td>unsigned short</td>
<td>Het getal van de knop die ingedrukt werd toen het event afgevuurd werd: Linkse knop=0, middelste knop=1 (indien aanwezig), rechtse knop=2. Voor muizen geconfigureerd voor linkshandig gebruik, waarbij de knopacties omgekeerd zijn, worden de waarden van rechts naar links gelezen.</td>
</tr>
<tr>
<td><code>buttons</code> {{readonlyInline}}</td>
<td>unsigned short</td>
<td>
<p>De knoppen die ingedrukt werden op het moment dat het muisevent afgevuurd werd: Linkse knop=1, Rechtse knop=2, Middelste (wiel) knop=4, 4e knop (typisch, "Browser Back" knop)=8, 5e knop (typisch, "Browser Forward" knop)=16. Indien twee of meer knoppen samen ingedrukt zijn, wordt de logische som van de waarden teruggegeven. B.v., indien zowel de linkse als de rechtse knop ingedrukt worden, wordt 3 teruggeven (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">Meer info</a>.</p>
</td>
</tr>
<tr>
<td><code>mozPressure</code> {{readonlyInline}}</td>
<td>float</td>
<td>
<p>De hoeveelheid druk toegepast op een touch of tabdevice, wanneer het event gegenereerd werd; deze waarde ligt tussen 0.0 (minimale druk) en 1.0 (maximale druk).</p>
</td>
</tr>
<tr>
<td><code>ctrlKey</code> {{readonlyInline}}</td>
<td>boolean</td>
<td><code>true</code> indien de control toets ingedrukt was wanneer het event gevuurd werd. <code>false</code> indien niet.</td>
</tr>
<tr>
<td><code>shiftKey</code> {{readonlyInline}}</td>
<td>boolean</td>
<td><code>true</code> indien de shift key ingedrukt was wanneer het event gevuurd werd. <code>false</code> indien niet.</td>
</tr>
<tr>
<td><code>altKey</code> {{readonlyInline}}</td>
<td>boolean</td>
<td><code>true</code> indien de alt key ingedrukt was wanneer het event gevuurd werd. <code>false</code> indien niet.</td>
</tr>
<tr>
<td><code>metaKey</code> {{readonlyInline}}</td>
<td>boolean</td>
<td><code>true</code> indien de meta key ingedrukt was wanneer het event gevuurd werd. <code>false</code> indien niet.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Edge</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basis support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
<tr>
<td>
<p>Op disabled form elements</p>
</td>
<td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}<sup>[1]</sup></td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basis support</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
<tr>
<td>Op disabled form elements</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] Werkt enkel voor {{HTMLElement("textarea")}} elementen and enkele {{HTMLElement("input")}} element types.</p>
<h2 id="Zie_ook">Zie ook</h2>
<ul>
<li>{{Event("mousedown")}}</li>
<li>{{Event("mouseup")}}</li>
<li>{{Event("mousemove")}}</li>
<li>{{Event("click")}}</li>
<li>{{Event("dblclick")}}</li>
<li>{{Event("mouseover")}}</li>
<li>{{Event("mouseout")}}</li>
<li>{{Event("mouseenter")}}</li>
<li>{{Event("mouseleave")}}</li>
<li>{{Event("contextmenu")}}</li>
</ul>
|
