/usr/share/qt5/doc/qtquick/qml-qtquick-mousearea.html is in qtdeclarative5-doc-html 5.2.1-3ubuntu15.
This file is owned by root:root, with mode 0o644.
The actual contents of the file can be viewed below.
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 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 | <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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" />
<!-- qquickmousearea.cpp -->
<title>MouseArea | QtQuick 5.2</title>
<link rel="stylesheet" type="text/css" href="style/offline.css" />
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<ul>
<li>Qt 5.2</li>
<li><a href="qtquick-index.html">Qt Quick</a></li>
<li><a href="qtquick-qmltypereference.html">QML Types</a></li>
<li>MouseArea</li>
<li id="buildversion">
Qt 5.2.1 Reference Documentation</li>
</ul>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<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="#signals">Signals</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">MouseArea</h1>
<span class="subtitle"></span>
<!-- $$$MouseArea-brief -->
<p>Enables simple mouse handling <a href="#details">More...</a></p>
<!-- @@@MouseArea -->
<table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> Import Statement:</td><td class="memItemRight bottomAlign"> </b><tt>import QtQuick 2.2</tt></td></tr><tr><td class="memItemLeft rightAlign topAlign"> Inherits:</td><td class="memItemRight bottomAlign"> <p><a href="qml-qtquick-item.html">Item</a></p>
</td></tr></table><ul>
<li><a href="qml-qtquick-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-qtquick-mousearea.html#acceptedButtons-prop">acceptedButtons</a></b></b> : Qt::MouseButtons</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#containsMouse-prop">containsMouse</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#cursorShape-prop">cursorShape</a></b></b> : Qt::CursorShape</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#drag-prop">drag</a></b></b><ul>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#drag.target-prop">drag.target</a></b></b> : Item</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#drag.active-prop">drag.active</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#drag.axis-prop">drag.axis</a></b></b> : enumeration</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#drag.minimumX-prop">drag.minimumX</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#drag.maximumX-prop">drag.maximumX</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#drag.minimumY-prop">drag.minimumY</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#drag.maximumY-prop">drag.maximumY</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#drag.filterChildren-prop">drag.filterChildren</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#drag.threshold-prop">drag.threshold</a></b></b> : real</li>
</ul>
</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#enabled-prop">enabled</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#hoverEnabled-prop">hoverEnabled</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#mouseX-prop">mouseX</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#mouseY-prop">mouseY</a></b></b> : real</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#pressed-prop">pressed</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#pressedButtons-prop">pressedButtons</a></b></b> : MouseButtons</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#preventStealing-prop">preventStealing</a></b></b> : bool</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#propagateComposedEvents-prop">propagateComposedEvents</a></b></b> : bool</li>
</ul>
<a name="signals"></a>
<h2>Signals</h2>
<ul>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#onCanceled-signal">onCanceled</a></b></b>()</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#onClicked-signal">onClicked</a></b></b>(MouseEvent <i>mouse</i>)</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#onDoubleClicked-signal">onDoubleClicked</a></b></b>(MouseEvent <i>mouse</i>)</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#onEntered-signal">onEntered</a></b></b>()</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#onExited-signal">onExited</a></b></b>()</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#onPositionChanged-signal">onPositionChanged</a></b></b>(MouseEvent <i>mouse</i>)</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#onPressAndHold-signal">onPressAndHold</a></b></b>(MouseEvent <i>mouse</i>)</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#onPressed-signal">onPressed</a></b></b>(MouseEvent <i>mouse</i>)</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#onReleased-signal">onReleased</a></b></b>(MouseEvent <i>mouse</i>)</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#onWheel-signal">onWheel</a></b></b>(WheelEvent <i>wheel</i>)</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>The <a href="qml-qtquick-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-qtquick-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-qtquick-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 the <a href="qml-qtquick-mousearea.html#containsMouse-prop">containsMouse</a> documentation for 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-qtquick-mousearea.html#onClicked-signal">onClicked</a>, <a href="qml-qtquick-mousearea.html#onDoubleClicked-signal">onDoubleClicked</a>, <a href="qml-qtquick-mousearea.html#onPressed-signal">onPressed</a>, <a href="qml-qtquick-mousearea.html#onReleased-signal">onReleased</a> and <a href="qml-qtquick-mousearea.html#onPressAndHold-signal">onPressAndHold</a>. It's also possible to handle mouse wheel events via the <a href="qml-qtquick-mousearea.html#onWheel-signal">onWheel</a> signal.</p>
<p>If a MouseArea overlaps with the area of other MouseArea items, you can choose to propagate <tt>clicked</tt>, <tt>doubleClicked</tt> and <tt>pressAndHold</tt> events to these other items by setting <a href="qml-qtquick-mousearea.html#propagateComposedEvents-prop">propagateComposedEvents</a> to true and rejecting events that should be propagated. See the <a href="qml-qtquick-mousearea.html#propagateComposedEvents-prop">propagateComposedEvents</a> documentation for details.</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-qtquick-mousearea.html#hoverEnabled-prop">hoverEnabled</a> property ensures that handlers defined for <a href="qml-qtquick-mousearea.html#onPositionChanged-signal">onPositionChanged</a>, <a href="qml-qtquick-mousearea.html#onEntered-signal">onEntered</a> and <a href="qml-qtquick-mousearea.html#onExited-signal">onExited</a> are used and that the <a href="qml-qtquick-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-qtquick-rectangle.html">Rectangle</a> that changes the <a href="qml-qtquick-rectangle.html">Rectangle</a> color to red when clicked:</p>
<pre class="qml">import QtQuick 2.0
<span class="type"><a href="qml-qtquick-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-qtquick-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-qtquick-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>;
<span class="keyword">else</span>
<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-qtquick-mouseevent.html">MouseEvent</a>, MouseArea example, and <a href="qtquick-input-topic.html">Important Concepts In Qt Quick - User Input</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">Qt::MouseButtons</span></p></td></tr></table></div><div class="qmldoc"><p>This property holds the mouse buttons that the mouse area reacts to.</p>
<p>To specify that the <a href="qml-qtquick-mousearea.html">MouseArea</a> will react to multiple buttons, Qt::MouseButtons flag values are combined using the "|" (or) operator:</p>
<pre class="cpp">MouseArea { acceptedButtons: <span class="type">Qt</span><span class="operator">.</span>LeftButton <span class="operator">|</span> <span class="type">Qt</span><span class="operator">.</span>RightButton }</pre>
<p>To indicate that all possible mouse buttons are to be accepted, the special value 'Qt.AllButtons' may be used:</p>
<pre class="cpp">MouseArea { acceptedButtons: <span class="type">Qt</span><span class="operator">.</span>AllButtons }</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="name">containsMouse</span> : <span class="type">bool</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-qtquick-mousearea.html#hoverEnabled-prop">hoverEnabled</a> is false, containsMouse will only be valid when the mouse is pressed.</p>
</div></div><!-- @@@containsMouse -->
<br/>
<!-- $$$cursorShape -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="cursorShape-prop"></a><span class="name">cursorShape</span> : <span class="type">Qt::CursorShape</span></p></td></tr></table></div><div class="qmldoc"><p>This property holds the cursor shape for this mouse area. Note that on platforms that do not display a mouse cursor this may have no effect.</p>
<p>The available cursor shapes are:</p>
<ul>
<li>Qt.ArrowCursor</li>
<li>Qt.UpArrowCursor</li>
<li>Qt.CrossCursor</li>
<li>Qt.WaitCursor</li>
<li>Qt.IBeamCursor</li>
<li>Qt.SizeVerCursor</li>
<li>Qt.SizeHorCursor</li>
<li>Qt.SizeBDiagCursor</li>
<li>Qt.SizeFDiagCursor</li>
<li>Qt.SizeAllCursor</li>
<li>Qt.BlankCursor</li>
<li>Qt.SplitVCursor</li>
<li>Qt.SplitHCursor</li>
<li>Qt.PointingHandCursor</li>
<li>Qt.ForbiddenCursor</li>
<li>Qt.WhatsThisCursor</li>
<li>Qt.BusyCursor</li>
<li>Qt.OpenHandCursor</li>
<li>Qt.ClosedHandCursor</li>
<li>Qt.DragCopyCursor</li>
<li>Qt.DragMoveCursor</li>
<li>Qt.DragLinkCursor</li>
</ul>
<p>In order to only set a mouse cursor shape for a region without reacting to mouse events set the <a href="qml-qtquick-mousearea.html#acceptedButtons-prop">acceptedButtons</a> to none:</p>
<pre class="cpp">MouseArea { cursorShape: <span class="type">Qt</span><span class="operator">.</span>IBeamCursor; acceptedButtons: <span class="type">Qt</span><span class="operator">.</span>NoButton }</pre>
<p>The default value is <tt>Qt.ArrowCursor</tt>.</p>
<p><b>See also </b>Qt::CursorShape.</p>
</div></div><!-- @@@cursorShape -->
<br/>
<!-- $$$drag -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="even"><th class="centerAlign"><p><a name="drag-prop"></a><b>drag group</b></p></th></tr><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-qtquick-item.html">Item</a></span></p></td></tr><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="drag.active-prop"></a><span class="name">drag.active</span> : <span class="type">bool</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">enumeration</span></p></td></tr><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="drag.minimumX-prop"></a><span class="name">drag.minimumX</span> : <span class="type">real</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">real</span></p></td></tr><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="drag.minimumY-prop"></a><span class="name">drag.minimumY</span> : <span class="type">real</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">real</span></p></td></tr><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="drag.filterChildren-prop"></a><span class="name">drag.filterChildren</span> : <span class="type">bool</span></p></td></tr><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="drag.threshold-prop"></a><span class="name">drag.threshold</span> : <span class="type">real</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-qtquick-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-qtquick-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-qtquick-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-qtquick-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-qtquick-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-qtquick-mousearea.html">MouseArea</a> to handle drags, for example, while descendants handle clicks:</p>
<p><tt>drag.threshold</tt> determines the threshold in pixels of when the drag operation should start. By default this is bound to a platform dependent value. This property was added in Qt Quick 2.2.</p>
<pre class="qml">import QtQuick 2.0
<span class="type"><a href="qml-qtquick-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-qtquick-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-qtquick-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-qtquick-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-qtquick-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 -->
<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">bool</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">bool</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-qtquick-mousearea.html#containsMouse-prop">containsMouse</a> property and the <a href="qml-qtquick-mousearea.html#onEntered-signal">onEntered</a>, <a href="qml-qtquick-mousearea.html#onExited-signal">onExited</a> and <a href="qml-qtquick-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="name">mouseX</span> : <span class="type">real</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-qtquick-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-qtquick-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-qtquick-mousearea.html">MouseArea</a> (<a href="qml-qtquick-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-qtquick-mousearea.html">MouseArea</a>.</p>
</div></div><!-- @@@mouseX -->
<br/>
<!-- $$$mouseY -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="mouseY-prop"></a><span class="name">mouseY</span> : <span class="type">real</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-qtquick-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-qtquick-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-qtquick-mousearea.html">MouseArea</a> (<a href="qml-qtquick-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-qtquick-mousearea.html">MouseArea</a>.</p>
</div></div><!-- @@@mouseY -->
<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="name">pressed</span> : <span class="type">bool</span></p></td></tr></table></div><div class="qmldoc"><p>This property holds whether any of the <a href="qml-qtquick-mousearea.html#acceptedButtons-prop">acceptedButtons</a> are 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="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-qtquick-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-qtquick-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>Note: </b>this property only handles buttons specified in <a href="qml-qtquick-mousearea.html#acceptedButtons-prop">acceptedButtons</a>.</p><p><b>See also </b><a href="qml-qtquick-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">bool</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-qtquick-mousearea.html">MouseArea</a>.</p>
<p>If a <a href="qml-qtquick-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-qtquick-mousearea.html">MouseArea</a> if a gesture is recognized by the parent item, e.g. a flick gesture. If preventStealing is set to true, no item will steal the mouse events.</p>
<p>Note that setting preventStealing to true once an item has started stealing events will have no effect until the next press event.</p>
<p>By default this property is false.</p>
</div></div><!-- @@@preventStealing -->
<br/>
<!-- $$$propagateComposedEvents -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlPropNode"><p><a name="propagateComposedEvents-prop"></a><span class="name">propagateComposedEvents</span> : <span class="type">bool</span></p></td></tr></table></div><div class="qmldoc"><p>This property holds whether composed mouse events will automatically propagate to other MouseAreas that overlap with this <a href="qml-qtquick-mousearea.html">MouseArea</a> but are lower in the visual stacking order. By default, this property is false.</p>
<p><a href="qml-qtquick-mousearea.html">MouseArea</a> contains several composed events: <tt>clicked</tt>, <tt>doubleClicked</tt> and <tt>pressAndHold</tt>. These are composed of basic mouse events, like <tt>pressed</tt>, and can be propagated differently in comparison to basic events.</p>
<p>If propagateComposedEvents is set to true, then composed events will be automatically propagated to other MouseAreas in the same location in the scene. Each event is propagated to the next <a href="qml-qtquick-mousearea.html#enabled-prop">enabled</a> <a href="qml-qtquick-mousearea.html">MouseArea</a> beneath it in the stacking order, propagating down this visual hierarchy until a <a href="qml-qtquick-mousearea.html">MouseArea</a> accepts the event. Unlike <tt>pressed</tt> events, composed events will not be automatically accepted if no handler is present.</p>
<p>For example, below is a yellow <a href="qml-qtquick-rectangle.html">Rectangle</a> that contains a blue <a href="qml-qtquick-rectangle.html">Rectangle</a>. The blue rectangle is the top-most item in the hierarchy of the visual stacking order; it will visually rendered above the yellow rectangle. Since the blue rectangle sets propagateComposedEvents to true, and also sets <a href="qml-qtquick-mouseevent.html#accepted-prop">MouseEvent::accepted</a> to false for all received <tt>clicked</tt> events, any <tt>clicked</tt> events it receives are propagated to the <a href="qml-qtquick-mousearea.html">MouseArea</a> of the yellow rectangle beneath it.</p>
<pre class="qml">import QtQuick 2.0
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">color</span>: <span class="string">"yellow"</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-qtquick-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 yellow"</span>)
}
<span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">color</span>: <span class="string">"blue"</span>
<span class="name">width</span>: <span class="number">50</span>; <span class="name">height</span>: <span class="number">50</span>
<span class="type"><a href="qml-qtquick-mousearea.html">MouseArea</a></span> {
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">propagateComposedEvents</span>: <span class="number">true</span>
<span class="name">onClicked</span>: {
<span class="name">console</span>.<span class="name">log</span>(<span class="string">"clicked blue"</span>)
<span class="name">mouse</span>.<span class="name">accepted</span> <span class="operator">=</span> <span class="number">false</span>
}
}
}
}</pre>
<p>Clicking on the blue rectangle will cause the <tt>onClicked</tt> handler of its child <a href="qml-qtquick-mousearea.html">MouseArea</a> to be invoked; the event will then be propagated to the <a href="qml-qtquick-mousearea.html">MouseArea</a> of the yellow rectangle, causing its own <tt>onClicked</tt> handler to be invoked.</p>
<p>This property greatly simplifies the usecase of when you want to have overlapping MouseAreas handling the composed events together. For example: if you want one <a href="qml-qtquick-mousearea.html">MouseArea</a> to handle <tt>clicked</tt> signals and the other to handle <tt>pressAndHold</tt>, or if you want one <a href="qml-qtquick-mousearea.html">MouseArea</a> to handle <tt>clicked</tt> most of the time, but pass it through when certain conditions are met.</p>
</div></div><!-- @@@propagateComposedEvents -->
<br/>
<h2>Signal 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><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 item 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-qtquick-mousearea.html">MouseArea</a> that is handling input, or when there is a <a href="qml-qtquick-mousearea.html">MouseArea</a> inside a <a href="qml-qtquick-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-qtquick-flickable.html">Flickable</a> will steal the mouse handling from the <a href="qml-qtquick-mousearea.html">MouseArea</a>. In these cases, to reset the logic when the <a href="qml-qtquick-mousearea.html">MouseArea</a> has lost the mouse handling to the <a href="qml-qtquick-flickable.html">Flickable</a>, <tt>onCanceled</tt> should be used in addition to <a href="qml-qtquick-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><span class="name">onClicked</span>(<span class="type"><a href="qml-qtquick-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-qtquick-mousearea.html">MouseArea</a> (pressing, moving outside the <a href="qml-qtquick-mousearea.html">MouseArea</a>, and then moving back inside and releasing is also considered a click).</p>
<p>The <a href="qml-qtquick-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-qtquick-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><span class="name">onDoubleClicked</span>(<span class="type"><a href="qml-qtquick-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-qtquick-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-qtquick-mouseevent.html">mouse</a> parameter is set to false in the handler, the <a href="qml-qtquick-mousearea.html#onPressed-signal">onPressed</a>/<a href="qml-qtquick-mousearea.html#onReleased-signal">onReleased</a>/<a href="qml-qtquick-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><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-qtquick-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-qtquick-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><span class="name">onExited</span>()</p></td></tr></table></div><div class="qmldoc"><p>This handler is called when the mouse exits the mouse area.</p>
<p>By default the onExited handler is only called while a button is pressed. Setting <a href="qml-qtquick-mousearea.html#hoverEnabled-prop">hoverEnabled</a> to true enables handling of onExited when no mouse button is pressed.</p>
<p>The example below shows a fairly typical relationship between two MouseAreas, with <tt>mouseArea2</tt> on top of <tt>mouseArea1</tt>. Moving the mouse into <tt>mouseArea2</tt> from <tt>mouseArea1</tt> will cause <tt>onExited</tt> to be called for <tt>mouseArea1</tt>.</p>
<pre class="qml"><span class="type"><a href="qml-qtquick-rectangle.html">Rectangle</a></span> {
<span class="name">width</span>: <span class="number">400</span>; <span class="name">height</span>: <span class="number">400</span>
<span class="type"><a href="qml-qtquick-mousearea.html">MouseArea</a></span> {
<span class="name">id</span>: <span class="name">mouseArea1</span>
<span class="name">anchors</span>.fill: <span class="name">parent</span>
<span class="name">hoverEnabled</span>: <span class="number">true</span>
}
<span class="type"><a href="qml-qtquick-mousearea.html">MouseArea</a></span> {
<span class="name">id</span>: <span class="name">mouseArea2</span>
<span class="name">width</span>: <span class="number">100</span>; <span class="name">height</span>: <span class="number">100</span>
<span class="name">anchors</span>.centerIn: <span class="name">parent</span>
<span class="name">hoverEnabled</span>: <span class="number">true</span>
}
}</pre>
<p>If instead you give the two mouseAreas a parent-child relationship, moving the mouse into <tt>mouseArea2</tt> from <tt>mouseArea1</tt> will <b>not</b> cause <tt>onExited</tt> to be called for <tt>mouseArea1</tt>. Instead, they will both be considered to be simultaneously hovered.</p>
<p><b>See also </b><a href="qml-qtquick-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><span class="name">onPositionChanged</span>(<span class="type"><a href="qml-qtquick-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-qtquick-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-qtquick-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-qtquick-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><span class="name">onPressAndHold</span>(<span class="type"><a href="qml-qtquick-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-qtquick-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-qtquick-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><span class="name">onPressed</span>(<span class="type"><a href="qml-qtquick-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-qtquick-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-qtquick-mouseevent.html">MouseEvent</a> parameter determines whether this <a href="qml-qtquick-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-qtquick-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-qtquick-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><span class="name">onReleased</span>(<span class="type"><a href="qml-qtquick-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-qtquick-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-qtquick-mouseevent.html">MouseEvent</a> parameter is ignored in this handler.</p>
<p><b>See also </b><a href="qml-qtquick-mousearea.html#onCanceled-signal">onCanceled</a>.</p>
</div></div><!-- @@@onReleased -->
<br/>
<!-- $$$onWheel -->
<div class="qmlitem"><div class="qmlproto"><table class="qmlname"><tr valign="top" class="odd"><td class="tblQmlFuncNode"><p><a name="onWheel-signal"></a><span class="name">onWheel</span>(<span class="type"><a href="qml-qtquick-wheelevent.html">WheelEvent</a></span><i> wheel</i>)</p></td></tr></table></div><div class="qmldoc"><p>This handler is called in response to both mouse wheel and trackpad scroll gestures.</p>
<p>The <a href="qml-qtquick-wheelevent.html">wheel</a> parameter provides information about the event, including the x and y position, any buttons currently pressed, and information about the wheel movement, including angleDelta and pixelDelta.</p>
</div></div><!-- @@@onWheel -->
<br/>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2013 Digia Plc and/or its
subsidiaries. Documentation contributions included herein are the copyrights of
their respective owners.<br> 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.<br> Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
|