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
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en_US" lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qdeclarativemousearea.cpp -->
<title>Qt 4.8: QML MouseArea Element</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="content">
<a href="index.html" class="qtref"><span>Qt Reference Documentation</span></a>
</div>
<div class="breadcrumb toolblock">
<ul>
<li class="first"><a href="index.html">Home</a></li>
<!-- Breadcrumbs go here -->
<li><a href="qdeclarativeelements.html">QML Elements</a></li>
<li>QML MouseArea Element</li>
</ul>
</div>
</div>
<div class="content mainContent">
<p class="naviNextPrevious headerNavi">
</p><p/>
<div class="toc">
<h3><a name="toc">Contents</a></h3>
<ul>
<li class="level1"><a href="#properties">Properties</a></li>
<li class="level1"><a href="#signal-handlers">Signal Handlers</a></li>
<li class="level1"><a href="#details">Detailed Description</a></li>
<li class="level2"><a href="#example-usage">Example Usage</a></li>
</ul>
</div>
<h1 class="title">QML MouseArea Element</h1>
<span class="subtitle"></span>
<!-- $$$MouseArea-brief -->
<p>The MouseArea item enables simple mouse handling. <a href="#details">More...</a></p>
<!-- @@@MouseArea -->
<p>Inherits <a href="qml-item.html">Item</a></p>
<p>This element was introduced in Qt 4.7.</p>
<ul>
<li><a href="qml-mousearea-members.html">List of all members, including inherited members</a></li>
</ul>
<a name="properties"></a>
<h2>Properties</h2>
<ul>
<li class="fn"><b><b><a href="qml-mousearea.html#acceptedButtons-prop">acceptedButtons</a></b></b> : Qt::MouseButtons</li>
<li class="fn"><b><b><a href="qml-mousearea.html#containsMouse-prop">containsMouse</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-mousearea.html#drag.active-prop">drag.active</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-mousearea.html#drag.axis-prop">drag.axis</a></b></b> : enumeration</li>
<li class="fn"><b><b><a href="qml-mousearea.html#drag.filterChildren-prop">drag.filterChildren</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-mousearea.html#drag.maximumX-prop">drag.maximumX</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-mousearea.html#drag.maximumY-prop">drag.maximumY</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-mousearea.html#drag.minimumX-prop">drag.minimumX</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-mousearea.html#drag.minimumY-prop">drag.minimumY</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-mousearea.html#drag.target-prop">drag.target</a></b></b> : Item</li>
<li class="fn"><b><b><a href="qml-mousearea.html#enabled-prop">enabled</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-mousearea.html#hoverEnabled-prop">hoverEnabled</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-mousearea.html#mouseX-prop">mouseX</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-mousearea.html#mouseY-prop">mouseY</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-mousearea.html#pressed-prop">pressed</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-mousearea.html#pressedButtons-prop">pressedButtons</a></b></b> : MouseButtons</li>
<li class="fn"><b><b><a href="qml-mousearea.html#preventStealing-prop">preventStealing</a></b></b> : bool</li>
</ul>
<a name="signal-handlers"></a>
<h2>Signal Handlers</h2>
<ul>
<li class="fn"><b><b><a href="qml-mousearea.html#onCanceled-signal">onCanceled</a></b></b></li>
<li class="fn"><b><b><a href="qml-mousearea.html#onClicked-signal">onClicked</a></b></b></li>
<li class="fn"><b><b><a href="qml-mousearea.html#onDoubleClicked-signal">onDoubleClicked</a></b></b></li>
<li class="fn"><b><b><a href="qml-mousearea.html#onEntered-signal">onEntered</a></b></b></li>
<li class="fn"><b><b><a href="qml-mousearea.html#onExited-signal">onExited</a></b></b></li>
<li class="fn"><b><b><a href="qml-mousearea.html#onPositionChanged-signal">onPositionChanged</a></b></b></li>
<li class="fn"><b><b><a href="qml-mousearea.html#onPressAndHold-signal">onPressAndHold</a></b></b></li>
<li class="fn"><b><b><a href="qml-mousearea.html#onPressed-signal">onPressed</a></b></b></li>
<li class="fn"><b><b><a href="qml-mousearea.html#onReleased-signal">onReleased</a></b></b></li>
</ul>
<!-- $$$MouseArea-description -->
<a name="details"></a>
<h2>Detailed Description</h2>
<p>A MouseArea is an invisible item that is typically used in conjunction with a visible item in order to provide mouse handling for that item. By effectively acting as a proxy, the logic for mouse handling can be contained within a MouseArea item.</p>
<p>For basic key handling, see the <a href="qml-keys.html">Keys attached property</a>.</p>
<p>The <a href="qml-mousearea.html#enabled-prop">enabled</a> property is used to enable and disable mouse handling for the proxied item. When disabled, the mouse area becomes transparent to mouse events.</p>
<p>The <a href="qml-mousearea.html#pressed-prop">pressed</a> read-only property indicates whether or not the user is holding down a mouse button over the mouse area. This property is often used in bindings between properties in a user interface. The <a href="qml-mousearea.html#containsMouse-prop">containsMouse</a> read-only property indicates the presence of the mouse cursor over the mouse area but, by default, only when a mouse button is held down; see below for further details.</p>
<p>Information about the mouse position and button clicks are provided via signals for which event handler properties are defined. The most commonly used involved handling mouse presses and clicks: <a href="qml-mousearea.html#onClicked-signal">onClicked</a>, <a href="qml-mousearea.html#onDoubleClicked-signal">onDoubleClicked</a>, <a href="qml-mousearea.html#onPressed-signal">onPressed</a>, <a href="qml-mousearea.html#onReleased-signal">onReleased</a> and <a href="qml-mousearea.html#onPressAndHold-signal">onPressAndHold</a>.</p>
<p>By default, MouseArea items only report mouse clicks and not changes to the position of the mouse cursor. Setting the <a href="qml-mousearea.html#hoverEnabled-prop">hoverEnabled</a> property ensures that handlers defined for <a href="qml-mousearea.html#onPositionChanged-signal">onPositionChanged</a>, <a href="qml-mousearea.html#onEntered-signal">onEntered</a> and <a href="qml-mousearea.html#onExited-signal">onExited</a> are used and that the <a href="qml-mousearea.html#containsMouse-prop">containsMouse</a> property is updated even when no mouse buttons are pressed.</p>
<a name="example-usage"></a>
<h2>Example Usage</h2>
<div class="float-right"><p><img src="images/qml-mousearea-snippet.png" alt="" /></p>
</div><p>The following example uses a MouseArea in a <a href="qml-rectangle.html">Rectangle</a> that changes the <a href="qml-rectangle.html">Rectangle</a> color to red when clicked:</p>
<pre class="qml"> import QtQuick 1.0
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>
<span class="name">color</span>: <span class="string">"green"</span>
<span class="type">MouseArea</span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">onClicked</span>: { <span class="name">parent</span>.<span class="name">color</span> <span class="operator">=</span> <span class="string">'red'</span> }
}
}</pre>
<br style="clear: both" /><p>Many MouseArea signals pass a <a href="qml-mouseevent.html">mouse</a> parameter that contains additional information about the mouse event, such as the position, button, and any key modifiers.</p>
<p>Here is an extension of the previous example that produces a different color when the area is right clicked:</p>
<pre class="qml"> <span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>
<span class="name">color</span>: <span class="string">"green"</span>
<span class="type">MouseArea</span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">acceptedButtons</span>: <span class="name">Qt</span>.<span class="name">LeftButton</span> <span class="operator">|</span> <span class="name">Qt</span>.<span class="name">RightButton</span>
<span class="name">onClicked</span>: {
<span class="keyword">if</span> (<span class="name">mouse</span>.<span class="name">button</span> <span class="operator">==</span> <span class="name">Qt</span>.<span class="name">RightButton</span>)
<span class="name">parent</span>.<span class="name">color</span> <span class="operator">=</span> <span class="string">'blue'</span>;
else
<span class="name">parent</span>.<span class="name">color</span> <span class="operator">=</span> <span class="string">'red'</span>;
}
}
}</pre>
<p><b>See also </b><a href="qml-mouseevent.html">MouseEvent</a> and <a href="declarative-touchinteraction-mousearea.html">MouseArea example</a>.</p>
<!-- @@@MouseArea -->
<h2>Property Documentation</h2>
<!-- $$$acceptedButtons -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="acceptedButtons-prop"></a><span class="name">acceptedButtons</span> : <span class="type"><a href="qt.html#MouseButton-enum">Qt::MouseButtons</a></span></p></td></tr></table></div><div class="qmldoc"><p>This property holds the mouse buttons that the mouse area reacts to.</p>
<p>The available buttons are:</p>
<ul>
<li>Qt.LeftButton</li>
<li>Qt.RightButton</li>
<li>Qt.MiddleButton</li>
<li>Qt.XButton1</li>
<li>Qt.XButton2</li>
</ul>
<p>To accept more than one button the flags can be combined with the "|" (or) operator:</p>
<pre class="cpp"> MouseArea { acceptedButtons: <span class="type"><a href="qt.html">Qt</a></span><span class="operator">.</span>LeftButton <span class="operator">|</span> <span class="type"><a href="qt.html">Qt</a></span><span class="operator">.</span>RightButton }</pre>
<p>The default value is <tt>Qt.LeftButton</tt>.</p>
</div></div><!-- @@@acceptedButtons -->
<br/>
<!-- $$$containsMouse -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="containsMouse-prop"></a><span class="qmlreadonly">read-only</span><span class="name">containsMouse</span> : <span class="type"><a href="qml-bool.html">bool</a></span></p></td></tr></table></div><div class="qmldoc"><p>This property holds whether the mouse is currently inside the mouse area.</p>
<p><b>Warning:</b> This property is not updated if the area moves under the mouse: <i>containsMouse</i> will not change. In addition, if <a href="qml-mousearea.html#hoverEnabled-prop">hoverEnabled</a> is false, containsMouse will only be valid when the mouse is pressed.</p>
</div></div><!-- @@@containsMouse -->
<br/>
<!-- $$$drag.target -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="drag.target-prop"></a><span class="name">drag.target</span> : <span class="type"><a href="qml-item.html">Item</a></span></p></td></tr><tr valign="top" class="even"><td class="tblQmlPropNode"><p><a name="drag.active-prop"></a><span class="name">drag.active</span> : <span class="type"><a href="qml-bool.html">bool</a></span></p></td></tr><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="drag.axis-prop"></a><span class="name">drag.axis</span> : <span class="type"><a href="qml-enumeration.html">enumeration</a></span></p></td></tr><tr valign="top" class="even"><td class="tblQmlPropNode"><p><a name="drag.minimumX-prop"></a><span class="name">drag.minimumX</span> : <span class="type"><a href="qml-real.html">real</a></span></p></td></tr><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="drag.maximumX-prop"></a><span class="name">drag.maximumX</span> : <span class="type"><a href="qml-real.html">real</a></span></p></td></tr><tr valign="top" class="even"><td class="tblQmlPropNode"><p><a name="drag.minimumY-prop"></a><span class="name">drag.minimumY</span> : <span class="type"><a href="qml-real.html">real</a></span></p></td></tr><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="drag.maximumY-prop"></a><span class="name">drag.maximumY</span> : <span class="type"><a href="qml-real.html">real</a></span></p></td></tr><tr valign="top" class="even"><td class="tblQmlPropNode"><p><a name="drag.filterChildren-prop"></a><span class="name">drag.filterChildren</span> : <span class="type"><a href="qml-bool.html">bool</a></span></p></td></tr></table></div><div class="qmldoc"><p><tt>drag</tt> provides a convenient way to make an item draggable.</p>
<ul>
<li><tt>drag.target</tt> specifies the id of the item to drag.</li>
<li><tt>drag.active</tt> specifies if the target item is currently being dragged.</li>
<li><tt>drag.axis</tt> specifies whether dragging can be done horizontally (<tt>Drag.XAxis</tt>), vertically (<tt>Drag.YAxis</tt>), or both (<tt>Drag.XandYAxis</tt>)</li>
<li><tt>drag.minimum</tt> and <tt>drag.maximum</tt> limit how far the target can be dragged along the corresponding axes.</li>
</ul>
<p>The following example displays a <a href="qml-rectangle.html">Rectangle</a> that can be dragged along the X-axis. The opacity of the rectangle is reduced when it is dragged to the right.</p>
<pre class="qml"> <span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
<span class="name">id</span>: <span class="name">container</span>
<span class="name">width</span>: <span class="number">600</span>; <span class="name">height</span>: <span class="number">200</span>
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
<span class="name">id</span>: <span class="name">rect</span>
<span class="name">width</span>: <span class="number">50</span>; <span class="name">height</span>: <span class="number">50</span>
<span class="name">color</span>: <span class="string">"red"</span>
<span class="name">opacity</span>: (<span class="number">600.0</span> <span class="operator">-</span> <span class="name">rect</span>.<span class="name">x</span>) <span class="operator">/</span> <span class="number">600</span>
<span class="type"><a href="qml-mousearea.html">MouseArea</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">drag</span>.target: <span class="name">rect</span>
<span class="name">drag</span>.axis: <span class="name">Drag</span>.<span class="name">XAxis</span>
<span class="name">drag</span>.minimumX: <span class="number">0</span>
<span class="name">drag</span>.maximumX: <span class="name">container</span>.<span class="name">width</span> <span class="operator">-</span> <span class="name">rect</span>.<span class="name">width</span>
}
}
}</pre>
<p><b>Note:</b> Items cannot be dragged if they are anchored for the requested <tt>drag.axis</tt>. For example, if <tt>anchors.left</tt> or <tt>anchors.right</tt> was set for <tt>rect</tt> in the above example, it cannot be dragged along the X-axis. This can be avoided by settng the anchor value to <tt>undefined</tt> in an <a href="qml-mousearea.html#onPressed-signal">onPressed</a> handler.</p>
<p>If <tt>drag.filterChildren</tt> is set to true, a drag can override descendant MouseAreas. This enables a parent <a href="qml-mousearea.html">MouseArea</a> to handle drags, for example, while descendants handle clicks:</p>
<pre class="qml"> import QtQuick 1.0
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">480</span>
<span class="name">height</span>: <span class="number">320</span>
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
<span class="name">x</span>: <span class="number">30</span>; <span class="name">y</span>: <span class="number">30</span>
<span class="name">width</span>: <span class="number">300</span>; <span class="name">height</span>: <span class="number">240</span>
<span class="name">color</span>: <span class="string">"lightsteelblue"</span>
<span class="type"><a href="qml-mousearea.html">MouseArea</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">drag</span>.target: <span class="name">parent</span>;
<span class="name">drag</span>.axis: <span class="string">"XAxis"</span>
<span class="name">drag</span>.minimumX: <span class="number">30</span>
<span class="name">drag</span>.maximumX: <span class="number">150</span>
<span class="name">drag</span>.filterChildren: <span class="number">true</span>
<span class="type"><a href="qml-rectangle.html">Rectangle</a></span> {
<span class="name">color</span>: <span class="string">"yellow"</span>
<span class="name">x</span>: <span class="number">50</span>; <span class="name">y</span> : <span class="number">50</span>
<span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>
<span class="type"><a href="qml-mousearea.html">MouseArea</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">onClicked</span>: <span class="name">console</span>.<span class="name">log</span>(<span class="string">"Clicked"</span>)
}
}
}
}
}</pre>
</div></div><!-- @@@drag.target -->
<br/>
<!-- $$$enabled -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="enabled-prop"></a><span class="name">enabled</span> : <span class="type"><a href="qml-bool.html">bool</a></span></p></td></tr></table></div><div class="qmldoc"><p>This property holds whether the item accepts mouse events.</p>
<p>By default, this property is true.</p>
</div></div><!-- @@@enabled -->
<br/>
<!-- $$$hoverEnabled -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="hoverEnabled-prop"></a><span class="name">hoverEnabled</span> : <span class="type"><a href="qml-bool.html">bool</a></span></p></td></tr></table></div><div class="qmldoc"><p>This property holds whether hover events are handled.</p>
<p>By default, mouse events are only handled in response to a button event, or when a button is pressed. Hover enables handling of all mouse events even when no mouse button is pressed.</p>
<p>This property affects the <a href="qml-mousearea.html#containsMouse-prop">containsMouse</a> property and the <a href="qml-mousearea.html#onEntered-signal">onEntered</a>, <a href="qml-mousearea.html#onExited-signal">onExited</a> and <a href="qml-mousearea.html#onPositionChanged-signal">onPositionChanged</a> signals.</p>
</div></div><!-- @@@hoverEnabled -->
<br/>
<!-- $$$mouseX -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="mouseX-prop"></a><span class="qmlreadonly">read-only</span><span class="name">mouseX</span> : <span class="type"><a href="qml-real.html">real</a></span></p></td></tr><tr valign="top" class="even"><td class="tblQmlPropNode"><p><a name="mouseY-prop"></a><span class="qmlreadonly">read-only</span><span class="name">mouseY</span> : <span class="type"><a href="qml-real.html">real</a></span></p></td></tr></table></div><div class="qmldoc"><p>These properties hold the coordinates of the mouse cursor.</p>
<p>If the <a href="qml-mousearea.html#hoverEnabled-prop">hoverEnabled</a> property is false then these properties will only be valid while a button is pressed, and will remain valid as long as the button is held down even if the mouse is moved outside the area.</p>
<p>By default, this property is false.</p>
<p>If <a href="qml-mousearea.html#hoverEnabled-prop">hoverEnabled</a> is true then these properties will be valid when:</p>
<ul>
<li>no button is pressed, but the mouse is within the <a href="qml-mousearea.html">MouseArea</a> (<a href="qml-mousearea.html#containsMouse-prop">containsMouse</a> is true).</li>
<li>a button is pressed and held, even if it has since moved out of the area.</li>
</ul>
<p>The coordinates are relative to the <a href="qml-mousearea.html">MouseArea</a>.</p>
</div></div><!-- @@@mouseX -->
<br/>
<!-- $$$pressed -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="pressed-prop"></a><span class="qmlreadonly">read-only</span><span class="name">pressed</span> : <span class="type"><a href="qml-bool.html">bool</a></span></p></td></tr></table></div><div class="qmldoc"><p>This property holds whether the mouse area is currently pressed.</p>
</div></div><!-- @@@pressed -->
<br/>
<!-- $$$pressedButtons -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="pressedButtons-prop"></a><span class="qmlreadonly">read-only</span><span class="name">pressedButtons</span> : <span class="type">MouseButtons</span></p></td></tr></table></div><div class="qmldoc"><p>This property holds the mouse buttons currently pressed.</p>
<p>It contains a bitwise combination of:</p>
<ul>
<li>Qt.LeftButton</li>
<li>Qt.RightButton</li>
<li>Qt.MiddleButton</li>
</ul>
<p>The code below displays "right" when the right mouse buttons is pressed:</p>
<pre class="qml"> <span class="type"><a href="qml-text.html">Text</a></span> {
<span class="name">text</span>: <span class="name">mouseArea</span>.<span class="name">pressedButtons</span> <span class="operator">&</span> <span class="name">Qt</span>.<span class="name">RightButton</span> ? <span class="string">"right"</span> : <span class="string">""</span>
<span class="name">horizontalAlignment</span>: <span class="name">Text</span>.<span class="name">AlignHCenter</span>
<span class="name">verticalAlignment</span>: <span class="name">Text</span>.<span class="name">AlignVCenter</span>
<span class="type"><a href="qml-mousearea.html">MouseArea</a></span> {
<span class="name">id</span>: <span class="name">mouseArea</span>
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">acceptedButtons</span>: <span class="name">Qt</span>.<span class="name">LeftButton</span> <span class="operator">|</span> <span class="name">Qt</span>.<span class="name">RightButton</span>
}
}</pre>
<p><b>See also </b><a href="qml-mousearea.html#acceptedButtons-prop">acceptedButtons</a>.</p>
</div></div><!-- @@@pressedButtons -->
<br/>
<!-- $$$preventStealing -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="preventStealing-prop"></a><span class="name">preventStealing</span> : <span class="type"><a href="qml-bool.html">bool</a></span></p></td></tr></table></div><div class="qmldoc"><p>This property holds whether the mouse events may be stolen from this <a href="qml-mousearea.html">MouseArea</a>.</p>
<p>If a <a href="qml-mousearea.html">MouseArea</a> is placed within an item that filters child mouse events, such as Flickable, the mouse events may be stolen from the <a href="qml-mousearea.html">MouseArea</a> if a gesture is recognized by the parent element, e.g. a flick gesture. If preventStealing is set to true, no element will steal the mouse events.</p>
<p>Note that setting preventStealing to true once an element has started stealing events will have no effect until the next press event.</p>
<p>By default this property is false.</p>
<p>This property group was introduced in QtQuick 1.1.</p>
</div></div><!-- @@@preventStealing -->
<br/>
<h2>Signal Handler Documentation</h2>
<!-- $$$onCanceled -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlFuncNode"><p><a name="onCanceled-signal"></a>MouseArea::<span class="name">onCanceled</span> ()</p></td></tr></table></div><div class="qmldoc"><p>This handler is called when mouse events have been canceled, either because an event was not accepted, or because another element stole the mouse event handling.</p>
<p>This signal is for advanced use: it is useful when there is more than one <a href="qml-mousearea.html">MouseArea</a> that is handling input, or when there is a <a href="qml-mousearea.html">MouseArea</a> inside a <a href="qml-flickable.html">Flickable</a>. In the latter case, if you execute some logic on the pressed signal and then start dragging, the <a href="qml-flickable.html">Flickable</a> will steal the mouse handling from the <a href="qml-mousearea.html">MouseArea</a>. In these cases, to reset the logic when the <a href="qml-mousearea.html">MouseArea</a> has lost the mouse handling to the <a href="qml-flickable.html">Flickable</a>, <tt>onCanceled</tt> should be used in addition to <a href="qml-mousearea.html#onReleased-signal">onReleased</a>.</p>
</div></div><!-- @@@onCanceled -->
<br/>
<!-- $$$onClicked -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlFuncNode"><p><a name="onClicked-signal"></a>MouseArea::<span class="name">onClicked</span> ( <span class="type"><a href="qml-mouseevent.html">MouseEvent</a></span> <i>mouse</i> )</p></td></tr></table></div><div class="qmldoc"><p>This handler is called when there is a click. A click is defined as a press followed by a release, both inside the <a href="qml-mousearea.html">MouseArea</a> (pressing, moving outside the <a href="qml-mousearea.html">MouseArea</a>, and then moving back inside and releasing is also considered a click).</p>
<p>The <a href="qml-mouseevent.html">mouse</a> parameter provides information about the click, including the x and y position of the release of the click, and whether the click was held.</p>
<p>The <i>accepted</i> property of the <a href="qml-mouseevent.html">MouseEvent</a> parameter is ignored in this handler.</p>
</div></div><!-- @@@onClicked -->
<br/>
<!-- $$$onDoubleClicked -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlFuncNode"><p><a name="onDoubleClicked-signal"></a>MouseArea::<span class="name">onDoubleClicked</span> ( <span class="type"><a href="qml-mouseevent.html">MouseEvent</a></span> <i>mouse</i> )</p></td></tr></table></div><div class="qmldoc"><p>This handler is called when there is a double-click (a press followed by a release followed by a press). The <a href="qml-mouseevent.html">mouse</a> parameter provides information about the click, including the x and y position of the release of the click, and whether the click was held.</p>
<p>If the <i>accepted</i> property of the <a href="qml-mouseevent.html">mouse</a> parameter is set to false in the handler, the <a href="qml-mousearea.html#onPressed-signal">onPressed</a>/<a href="qml-mousearea.html#onReleased-signal">onReleased</a>/<a href="qml-mousearea.html#onClicked-signal">onClicked</a> handlers will be called for the second click; otherwise they are suppressed. The accepted property defaults to true.</p>
</div></div><!-- @@@onDoubleClicked -->
<br/>
<!-- $$$onEntered -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlFuncNode"><p><a name="onEntered-signal"></a>MouseArea::<span class="name">onEntered</span> ()</p></td></tr></table></div><div class="qmldoc"><p>This handler is called when the mouse enters the mouse area.</p>
<p>By default the onEntered handler is only called while a button is pressed. Setting <a href="qml-mousearea.html#hoverEnabled-prop">hoverEnabled</a> to true enables handling of onEntered when no mouse button is pressed.</p>
<p><b>See also </b><a href="qml-mousearea.html#hoverEnabled-prop">hoverEnabled</a>.</p>
</div></div><!-- @@@onEntered -->
<br/>
<!-- $$$onExited -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlFuncNode"><p><a name="onExited-signal"></a>MouseArea::<span class="name">onExited</span> ()</p></td></tr></table></div><div class="qmldoc"><p>This handler is called when the mouse exists the mouse area.</p>
<p>By default the onExited handler is only called while a button is pressed. Setting <a href="qml-mousearea.html#hoverEnabled-prop">hoverEnabled</a> to true enables handling of onExited when no mouse button is pressed.</p>
<p><b>See also </b><a href="qml-mousearea.html#hoverEnabled-prop">hoverEnabled</a>.</p>
</div></div><!-- @@@onExited -->
<br/>
<!-- $$$onPositionChanged -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlFuncNode"><p><a name="onPositionChanged-signal"></a>MouseArea::<span class="name">onPositionChanged</span> ( <span class="type"><a href="qml-mouseevent.html">MouseEvent</a></span> <i>mouse</i> )</p></td></tr></table></div><div class="qmldoc"><p>This handler is called when the mouse position changes.</p>
<p>The <a href="qml-mouseevent.html">mouse</a> parameter provides information about the mouse, including the x and y position, and any buttons currently pressed.</p>
<p>The <i>accepted</i> property of the <a href="qml-mouseevent.html">MouseEvent</a> parameter is ignored in this handler.</p>
<p>By default the onPositionChanged handler is only called while a button is pressed. Setting <a href="qml-mousearea.html#hoverEnabled-prop">hoverEnabled</a> to true enables handling of onPositionChanged when no mouse button is pressed.</p>
</div></div><!-- @@@onPositionChanged -->
<br/>
<!-- $$$onPressAndHold -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlFuncNode"><p><a name="onPressAndHold-signal"></a>MouseArea::<span class="name">onPressAndHold</span> ( <span class="type"><a href="qml-mouseevent.html">MouseEvent</a></span> <i>mouse</i> )</p></td></tr></table></div><div class="qmldoc"><p>This handler is called when there is a long press (currently 800ms). The <a href="qml-mouseevent.html">mouse</a> parameter provides information about the press, including the x and y position of the press, and which button is pressed.</p>
<p>The <i>accepted</i> property of the <a href="qml-mouseevent.html">MouseEvent</a> parameter is ignored in this handler.</p>
</div></div><!-- @@@onPressAndHold -->
<br/>
<!-- $$$onPressed -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlFuncNode"><p><a name="onPressed-signal"></a>MouseArea::<span class="name">onPressed</span> ( <span class="type"><a href="qml-mouseevent.html">MouseEvent</a></span> <i>mouse</i> )</p></td></tr></table></div><div class="qmldoc"><p>This handler is called when there is a press. The <a href="qml-mouseevent.html">mouse</a> parameter provides information about the press, including the x and y position and which button was pressed.</p>
<p>The <i>accepted</i> property of the <a href="qml-mouseevent.html">MouseEvent</a> parameter determines whether this <a href="qml-mousearea.html">MouseArea</a> will handle the press and all future mouse events until release. The default is to accept the event and not allow other <a href="qml-mousearea.html">MouseArea</a> beneath this one to handle the event. If <i>accepted</i> is set to false, no further events will be sent to this <a href="qml-mousearea.html">MouseArea</a> until the button is next pressed.</p>
</div></div><!-- @@@onPressed -->
<br/>
<!-- $$$onReleased -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlFuncNode"><p><a name="onReleased-signal"></a>MouseArea::<span class="name">onReleased</span> ( <span class="type"><a href="qml-mouseevent.html">MouseEvent</a></span> <i>mouse</i> )</p></td></tr></table></div><div class="qmldoc"><p>This handler is called when there is a release. The <a href="qml-mouseevent.html">mouse</a> parameter provides information about the click, including the x and y position of the release of the click, and whether the click was held.</p>
<p>The <i>accepted</i> property of the <a href="qml-mouseevent.html">MouseEvent</a> parameter is ignored in this handler.</p>
<p><b>See also </b><a href="qml-mousearea.html#onCanceled-signal">onCanceled</a>.</p>
</div></div><!-- @@@onReleased -->
<br/>
<p class="naviNextPrevious footerNavi">
</p>
<div class="ft">
<span></span>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2012 Nokia Corporation and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.</p>
<br />
<p>
The documentation provided herein is licensed under the terms of the
<a href="http://www.gnu.org/licenses/fdl.html">GNU Free Documentation
License version 1.3</a> as published by the Free Software Foundation.</p>
<p>
Documentation sources may be obtained from <a href="http://www.qt-project.org">
www.qt-project.org</a>.</p>
<br />
<p>
Nokia, Qt and their respective logos are trademarks of Nokia Corporation
in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. <a title="Privacy Policy"
href="http://en.gitorious.org/privacy_policy/">Privacy Policy</a></p>
</div>
</body>
</html>
|
