<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- qquickmousearea.cpp -->
<title>MouseArea QML Type | Qt Quick 5.12.6</title>
<link rel="stylesheet" type="text/css" href="style/offline-simple.css" />
<script type="text/javascript">
document.getElementsByTagName("link").item(0).setAttribute("href", "style/offline.css");
// loading style sheet breaks anchors that were jumped to before
// so force jumping to anchor again
setTimeout(function() {
var anchor = location.hash;
// need to jump to different anchor first (e.g. none)
location.hash = "#";
setTimeout(function() {
location.hash = anchor;
}, 0);
}, 0);
</script>
</head>
<body>
<div class="header" id="qtdocheader">
<div class="main">
<div class="main-rounded">
<div class="navigationbar">
<table><tr>
<td >Qt 5.12</td><td ><a href="qtquick-index.html">Qt Quick</a></td><td ><a href="qtquick-qmlmodule.html">QML Types</a></td><td >MouseArea QML Type</td></tr></table><table class="buildversion"><tr>
<td id="buildversion" width="100%" align="right"><a href="qtquick-index.html">Qt 5.12.6 Reference Documentation</a></td>
</tr></table>
</div>
</div>
<div class="content">
<div class="line">
<div class="content mainContent">
<div class="sidebar">
<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>
<div class="sidebar-content" id="sidebar-content"></div></div>
<h1 class="title">MouseArea QML Type</h1>
<span class="subtitle"></span>
<!-- $$$MouseArea-brief -->
<p>Enables simple mouse handling. <a href="#details">More...</a></p>
<!-- @@@MouseArea -->
<div class="table"><table class="alignedsummary">
<tr><td class="memItemLeft rightAlign topAlign"> Import Statement:</td><td class="memItemRight bottomAlign"> import QtQuick 2.12</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></div><ul>
<li><a href="qml-qtquick-mousearea-members.html">List of all members, including inherited members</a></li>
</ul>
<a name="properties"></a>
<h2 id="properties">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#containsPress-prop">containsPress</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#pressAndHoldInterval-prop">pressAndHoldInterval</a></b></b> : int</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>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#scrollGestureEnabled-prop">scrollGestureEnabled</a></b></b> : bool</li>
</ul>
<a name="signals"></a>
<h2 id="signals">Signals</h2>
<ul>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#canceled-signal">canceled</a></b></b>()</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#clicked-signal">clicked</a></b></b>(MouseEvent <i>mouse</i>)</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#doubleClicked-signal">doubleClicked</a></b></b>(MouseEvent <i>mouse</i>)</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#entered-signal">entered</a></b></b>()</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#exited-signal">exited</a></b></b>()</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#positionChanged-signal">positionChanged</a></b></b>(MouseEvent <i>mouse</i>)</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#pressAndHold-signal">pressAndHold</a></b></b>(MouseEvent <i>mouse</i>)</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#pressed-signal">pressed</a></b></b>(MouseEvent <i>mouse</i>)</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#released-signal">released</a></b></b>(MouseEvent <i>mouse</i>)</li>
<li class="fn"><b><b><a href="qml-qtquick-mousearea.html#wheel-signal">wheel</a></b></b>(WheelEvent <i>wheel</i>)</li>
</ul>
<!-- $$$MouseArea-description -->
<a name="details"></a>
<h2 id="details">Detailed Description</h2>
<p>A <a href="qml-qtquick-mousearea.html">MouseArea</a> 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 <a href="qml-qtquick-mousearea.html">MouseArea</a> 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><a href="qml-qtquick-mousearea.html">MouseArea</a> is an invisible Item, but it has a visible property. When set to false, 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: onClicked, onDoubleClicked, onPressed, onReleased and onPressAndHold. It's also possible to handle mouse wheel events via the onWheel signal.</p>
<p>If a <a href="qml-qtquick-mousearea.html">MouseArea</a> overlaps with the area of other <a href="qml-qtquick-mousearea.html">MouseArea</a> items, you can choose to propagate <code>clicked</code>, <code>doubleClicked</code> and <code>pressAndHold</code> 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, <a href="qml-qtquick-mousearea.html">MouseArea</a> 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 onPositionChanged, onEntered and onExited 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 id="example-usage">Example Usage</h2>
<div class="float-right"><p><img src="images/qml-mousearea-snippet.png" alt="" /></p>
</div><p>The following example uses a <a href="qml-qtquick-mousearea.html">MouseArea</a> 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
Rectangle {
width: 100; height: 100
color: "green"
MouseArea {
anchors.fill: parent
onClicked: { parent.color = 'red' }
}
}
</pre>
<br style="clear: both" /><p>Many <a href="qml-qtquick-mousearea.html">MouseArea</a> 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">
Rectangle {
width: 100; height: 100
color: "green"
MouseArea {
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button == Qt.RightButton)
parent.color = 'blue';
else
parent.color = 'red';
}
}
}
</pre>
<p><b>See also </b><a href="qml-qtquick-mouseevent.html">MouseEvent</a>, <a href="qtquick-mousearea-example.html">MouseArea example</a>, 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">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="acceptedButtons-prop">
<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><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 <code>Qt.LeftButton</code>.</p>
</div></div><!-- @@@acceptedButtons -->
<br/>
<!-- $$$containsMouse -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="containsMouse-prop">
<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><div class="qmldoc"><p>This property holds whether the mouse is currently inside the mouse area.</p>
<p><b>Warning:</b> If <a href="qml-qtquick-mousearea.html#hoverEnabled-prop">hoverEnabled</a> is false, containsMouse will only be valid when the mouse is pressed while the mouse cursor is inside the <a href="qml-qtquick-mousearea.html">MouseArea</a>.</p>
</div></div><!-- @@@containsMouse -->
<br/>
<!-- $$$containsPress -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="containsPress-prop">
<td class="tblQmlPropNode"><p>
<a name="containsPress-prop"></a><span class="name">containsPress</span> : <span class="type">bool</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This is a convenience property equivalent to <code>pressed && containsMouse</code>, i.e. it holds whether any of the <a href="qml-qtquick-mousearea.html#acceptedButtons-prop">acceptedButtons</a> are currently pressed and the mouse is currently within the <a href="qml-qtquick-mousearea.html">MouseArea</a>.</p>
<p>This property is particularly useful for highlighting an item while the mouse is pressed within its bounds.</p>
<p>This property was introduced in Qt 5.4.</p>
<p><b>See also </b><a href="qml-qtquick-mousearea.html#pressed-prop">pressed</a> and <a href="qml-qtquick-mousearea.html#containsMouse-prop">containsMouse</a>.</p>
</div></div><!-- @@@containsPress -->
<br/>
<!-- $$$cursorShape -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="cursorShape-prop">
<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><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 <code>Qt.ArrowCursor</code>.</p>
<p><b>See also </b>Qt::CursorShape.</p>
</div></div><!-- @@@cursorShape -->
<br/>
<!-- $$$drag -->
<div class="qmlitem"><div class="qmlproto"><div class="table"><table class="qmlname"><tr valign="top" class="even" id="drag-prop"><th class="centerAlign"><p><a name="drag-prop"></a><b>drag group</b></p></th></tr><tr valign="top" class="odd" id="drag.target-prop"><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" id="drag.active-prop"><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" id="drag.axis-prop"><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" id="drag.minimumX-prop"><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" id="drag.maximumX-prop"><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" id="drag.minimumY-prop"><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" id="drag.maximumY-prop"><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" id="drag.filterChildren-prop"><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" id="drag.threshold-prop"><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><div class="qmldoc"><p><code>drag</code> provides a convenient way to make an item draggable.</p>
<ul>
<li><code>drag.target</code> specifies the id of the item to drag.</li>
<li><code>drag.active</code> specifies if the target item is currently being dragged.</li>
<li><code>drag.axis</code> specifies whether dragging can be done horizontally (<code>Drag.XAxis</code>), vertically (<code>Drag.YAxis</code>), or both (<code>Drag.XAndYAxis</code>)</li>
<li><code>drag.minimum</code> and <code>drag.maximum</code> 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">
Rectangle {
id: container
width: 600; height: 200
Rectangle {
id: rect
width: 50; height: 50
color: "red"
opacity: (600.0 - rect.x) / 600
MouseArea {
anchors.fill: parent
drag.target: rect
drag.axis: Drag.XAxis
drag.minimumX: 0
drag.maximumX: container.width - rect.width
}
}
}
</pre>
<p><b>Note: </b>Items cannot be dragged if they are anchored for the requested <code>drag.axis</code>. For example, if <code>anchors.left</code> or <code>anchors.right</code> was set for <code>rect</code> in the above example, it cannot be dragged along the X-axis. This can be avoided by settng the anchor value to <code>undefined</code> in an <a href="qml-qtquick-mousearea.html#pressed-prop">onPressed</a> handler.</p><p>If <code>drag.filterChildren</code> 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><code>drag.threshold</code> 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>
<p>If <code>drag.smoothed</code> is <code>true</code>, the target will be moved only after the drag operation has started. If set to <code>false</code>, the target will be moved straight to the current mouse position. By default, this property is <code>true</code>. This property was added in Qt Quick 2.4</p>
<p>See the <a href="qml-qtquick-drag.html">Drag</a> attached property and <a href="qml-qtquick-droparea.html">DropArea</a> if you want to make a drop.</p>
<pre class="qml">
import QtQuick 2.0
Rectangle {
width: 480
height: 320
Rectangle {
x: 30; y: 30
width: 300; height: 240
color: "lightsteelblue"
MouseArea {
anchors.fill: parent
drag.target: parent;
drag.axis: "XAxis"
drag.minimumX: 30
drag.maximumX: 150
drag.filterChildren: true
Rectangle {
color: "yellow"
x: 50; y : 50
width: 100; height: 100
MouseArea {
anchors.fill: parent
onClicked: console.log("Clicked")
}
}
}
}
}
</pre>
</div></div><!-- @@@drag -->
<br/>
<!-- $$$enabled -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="enabled-prop">
<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><div class="qmldoc"><p>This property holds whether the item accepts mouse events.</p>
<p><b>Note: </b>Due to historical reasons, this property is not equivalent to Item.enabled. It only affects mouse events, and its effect does not propagate to child items.</p><p>By default, this property is true.</p>
</div></div><!-- @@@enabled -->
<br/>
<!-- $$$hoverEnabled -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="hoverEnabled-prop">
<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><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 onEntered, onExited and onPositionChanged signals.</p>
</div></div><!-- @@@hoverEnabled -->
<br/>
<!-- $$$mouseX -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="mouseX-prop">
<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><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">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="mouseY-prop">
<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><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/>
<!-- $$$pressAndHoldInterval -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="pressAndHoldInterval-prop">
<td class="tblQmlPropNode"><p>
<a name="pressAndHoldInterval-prop"></a><span class="name">pressAndHoldInterval</span> : <span class="type">int</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property overrides the elapsed time in milliseconds before <code>pressAndHold</code> is emitted.</p>
<p>If not explicitly set -- or after reset -- the value follows <code>QStyleHints::mousePressAndHoldInterval</code>.</p>
<p>Typically it's sufficient to set this property globally using the application style hint. This property should be used when varying intervals are needed for certain MouseAreas.</p>
<p>This property was introduced in Qt 5.9.</p>
<p><b>See also </b><a href="qml-qtquick-mousearea.html#pressAndHold-signal">pressAndHold</a>.</p>
</div></div><!-- @@@pressAndHoldInterval -->
<br/>
<!-- $$$pressed -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="pressed-prop">
<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><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">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="pressedButtons-prop">
<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><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">
Text {
text: mouseArea.pressedButtons & Qt.RightButton ? "right" : ""
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
MouseArea {
id: mouseArea
anchors.fill: parent
acceptedButtons: Qt.LeftButton | Qt.RightButton
}
}
</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">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="preventStealing-prop">
<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><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">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="propagateComposedEvents-prop">
<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><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: <code>clicked</code>, <code>doubleClicked</code> and <code>pressAndHold</code>. These are composed of basic mouse events, like <code>pressed</code>, 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 <code>pressed</code> 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 <code>clicked</code> events, any <code>clicked</code> 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">
</pre>
<p>Clicking on the blue rectangle will cause the <code>onClicked</code> 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 <code>onClicked</code> 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 <code>clicked</code> signals and the other to handle <code>pressAndHold</code>, or if you want one <a href="qml-qtquick-mousearea.html">MouseArea</a> to handle <code>clicked</code> most of the time, but pass it through when certain conditions are met.</p>
</div></div><!-- @@@propagateComposedEvents -->
<br/>
<!-- $$$scrollGestureEnabled -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="scrollGestureEnabled-prop">
<td class="tblQmlPropNode"><p>
<a name="scrollGestureEnabled-prop"></a><span class="name">scrollGestureEnabled</span> : <span class="type">bool</span></p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This property controls whether this <a href="qml-qtquick-mousearea.html">MouseArea</a> responds to scroll gestures from non-mouse devices, such as the 2-finger flick gesture on a trackpad. If set to false, the <a href="qml-qtquick-mousearea.html#wheel-signal">wheel</a> signal be emitted only when the wheel event comes from an actual mouse with a wheel, while scroll gesture events will pass through to any other Item that will handle them. For example, the user might perform a flick gesture while the cursor is over an item containing a <a href="qml-qtquick-mousearea.html">MouseArea</a>, intending to interact with a Flickable which is underneath. Setting this property to false will allow the <a href="qml-qtquick-pincharea.html">PinchArea</a> to handle the mouse wheel or the pinch gesture, while the Flickable handles the flick gesture.</p>
<p>By default, this property is true.</p>
<p>This property was introduced in Qt 5.5.</p>
</div></div><!-- @@@scrollGestureEnabled -->
<br/>
<h2>Signal Documentation</h2>
<!-- $$$canceled -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="canceled-signal">
<td class="tblQmlFuncNode"><p>
<a name="canceled-signal"></a><span class="name">canceled</span>()</p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This signal is emitted when mouse events have been canceled, 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 in the <code>onPressed</code> signal handler 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>, <code>canceled</code> should be handled in addition to <a href="qml-qtquick-mousearea.html#released-signal">released</a>.</p>
<p>The corresponding handler is <code>onCanceled</code>.</p>
</div></div><!-- @@@canceled -->
<br/>
<!-- $$$clicked -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="clicked-signal">
<td class="tblQmlFuncNode"><p>
<a name="clicked-signal"></a><span class="name">clicked</span>(<span class="type"><a href="qml-qtquick-mouseevent.html">MouseEvent</a></span> <i>mouse</i>)</p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This signal is emitted 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>When handling this signal, changing the <a href="qml-qtquick-mouseevent.html#accepted-prop">accepted</a> property of the <i>mouse</i> parameter has no effect, unless the <a href="qml-qtquick-mousearea.html#propagateComposedEvents-prop">propagateComposedEvents</a> property is <code>true</code>.</p>
<p>The corresponding handler is <code>onClicked</code>.</p>
</div></div><!-- @@@clicked -->
<br/>
<!-- $$$doubleClicked -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="doubleClicked-signal">
<td class="tblQmlFuncNode"><p>
<a name="doubleClicked-signal"></a><span class="name">doubleClicked</span>(<span class="type"><a href="qml-qtquick-mouseevent.html">MouseEvent</a></span> <i>mouse</i>)</p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This signal is emitted 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>When handling this signal, if the <a href="qml-qtquick-mouseevent.html#accepted-prop">accepted</a> property of the <i>mouse</i> parameter is set to false, the pressed/released/clicked signals will be emitted for the second click; otherwise they are suppressed. The <code>accepted</code> property defaults to true.</p>
<p>The corresponding handler is <code>onDoubleClicked</code>.</p>
</div></div><!-- @@@doubleClicked -->
<br/>
<!-- $$$entered -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="entered-signal">
<td class="tblQmlFuncNode"><p>
<a name="entered-signal"></a><span class="name">entered</span>()</p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This signal is emitted when the mouse enters the mouse area.</p>
<p>By default this signal is only emitted if a button is currently pressed. Set <a href="qml-qtquick-mousearea.html#hoverEnabled-prop">hoverEnabled</a> to true to emit this signal even when no mouse button is pressed.</p>
<p>The corresponding handler is <code>onEntered</code>.</p>
<p><b>See also </b><a href="qml-qtquick-mousearea.html#hoverEnabled-prop">hoverEnabled</a>.</p>
</div></div><!-- @@@entered -->
<br/>
<!-- $$$exited -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="exited-signal">
<td class="tblQmlFuncNode"><p>
<a name="exited-signal"></a><span class="name">exited</span>()</p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This signal is emitted when the mouse exits the mouse area.</p>
<p>By default this signal is only emitted if a button is currently pressed. Set <a href="qml-qtquick-mousearea.html#hoverEnabled-prop">hoverEnabled</a> to true to emit this signal even when no mouse button is pressed.</p>
<p>The example below shows a fairly typical relationship between two MouseAreas, with <code>mouseArea2</code> on top of <code>mouseArea1</code>. Moving the mouse into <code>mouseArea2</code> from <code>mouseArea1</code> will cause <code>mouseArea1</code> to emit the <code>exited</code> signal.</p>
<pre class="qml">
</pre>
<p>If instead you give the two MouseAreas a parent-child relationship, moving the mouse into <code>mouseArea2</code> from <code>mouseArea1</code> will <b>not</b> cause <code>mouseArea1</code> to emit <code>exited</code>. Instead, they will both be considered to be simultaneously hovered.</p>
<p>The corresponding handler is <code>onExited</code>.</p>
<p><b>See also </b><a href="qml-qtquick-mousearea.html#hoverEnabled-prop">hoverEnabled</a>.</p>
</div></div><!-- @@@exited -->
<br/>
<!-- $$$positionChanged -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="positionChanged-signal">
<td class="tblQmlFuncNode"><p>
<a name="positionChanged-signal"></a><span class="name">positionChanged</span>(<span class="type"><a href="qml-qtquick-mouseevent.html">MouseEvent</a></span> <i>mouse</i>)</p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This signal is emitted 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>By default this signal is only emitted if a button is currently pressed. Set <a href="qml-qtquick-mousearea.html#hoverEnabled-prop">hoverEnabled</a> to true to emit this signal even when no mouse button is pressed.</p>
<p>When handling this signal, changing the <a href="qml-qtquick-mouseevent.html#accepted-prop">accepted</a> property of the <i>mouse</i> parameter has no effect.</p>
<p>The corresponding handler is <code>onPositionChanged</code>.</p>
</div></div><!-- @@@positionChanged -->
<br/>
<!-- $$$pressAndHold -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="pressAndHold-signal">
<td class="tblQmlFuncNode"><p>
<a name="pressAndHold-signal"></a><span class="name">pressAndHold</span>(<span class="type"><a href="qml-qtquick-mouseevent.html">MouseEvent</a></span> <i>mouse</i>)</p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This signal is emitted 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>When handling this signal, changing the <a href="qml-qtquick-mouseevent.html#accepted-prop">accepted</a> property of the <i>mouse</i> parameter has no effect, unless the <a href="qml-qtquick-mousearea.html#propagateComposedEvents-prop">propagateComposedEvents</a> property is <code>true</code>.</p>
<p>The corresponding handler is <code>onPressAndHold</code>.</p>
</div></div><!-- @@@pressAndHold -->
<br/>
<!-- $$$pressed -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="pressed-signal">
<td class="tblQmlFuncNode"><p>
<a name="pressed-signal"></a><span class="name">pressed</span>(<span class="type"><a href="qml-qtquick-mouseevent.html">MouseEvent</a></span> <i>mouse</i>)</p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This signal is emitted 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>When handling this signal, use the <a href="qml-qtquick-mouseevent.html#accepted-prop">accepted</a> property of the <i>mouse</i> parameter to control whether this <a href="qml-qtquick-mousearea.html">MouseArea</a> handles the press and all future mouse events until release. The default is to accept the event and not allow other MouseAreas 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>
<p>The corresponding handler is <code>onPressed</code>.</p>
</div></div><!-- @@@pressed -->
<br/>
<!-- $$$released -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="released-signal">
<td class="tblQmlFuncNode"><p>
<a name="released-signal"></a><span class="name">released</span>(<span class="type"><a href="qml-qtquick-mouseevent.html">MouseEvent</a></span> <i>mouse</i>)</p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This signal is emitted 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>When handling this signal, changing the <a href="qml-qtquick-mouseevent.html#accepted-prop">accepted</a> property of the <i>mouse</i> parameter has no effect.</p>
<p>The corresponding handler is <code>onReleased</code>.</p>
<p><b>See also </b><a href="qml-qtquick-mousearea.html#canceled-signal">canceled</a>.</p>
</div></div><!-- @@@released -->
<br/>
<!-- $$$wheel -->
<div class="qmlitem"><div class="qmlproto">
<div class="table"><table class="qmlname">
<tr valign="top" class="odd" id="wheel-signal">
<td class="tblQmlFuncNode"><p>
<a name="wheel-signal"></a><span class="name">wheel</span>(<span class="type"><a href="qml-qtquick-wheelevent.html">WheelEvent</a></span> <i>wheel</i>)</p></td></tr>
</table></div>
</div><div class="qmldoc"><p>This signal is emitted 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>
<p>The corresponding handler is <code>onWheel</code>.</p>
</div></div><!-- @@@wheel -->
<br/>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>
<acronym title="Copyright">©</acronym> 2019 The Qt Company Ltd.
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/> Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property
of their respective owners. </p>
</div>
</body>
</html>
distrib
>
Mageia
>
7
>
i586
>
media
>
core-updates
>
by-pkgid
>
6e2327ca1c896c6d674ae53117299f21
>
files
>
983
