Qt Quick Examples - MouseArea

This is an example of the MouseArea type in QML.

MouseArea example shows how to respond to clicks and drags with a MouseArea. For more information, visit Important Concepts In Qt Quick - User Input.

Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

MouseArea Behavior

When you click inside the red square, the Text type will list several properties of that click which are available to QML. The opacity of the red square will be reduced while the mouse is pressed and remains inside the MouseArea.

Signals are emitted by the MouseArea when clicks or other discrete operations occur within it.

onPressAndHold: btn.text = 'Press and hold'
onClicked: btn.text = 'Clicked (wasHeld=' + mouse.wasHeld + ')'
onDoubleClicked: btn.text = 'Double clicked'

MouseArea can also be used to drag items around. By setting the parameters of the drag property, the target item will be dragged around if the user starts to drag within the mouse area boundary.

drag.target: blueSquare
drag.axis: Drag.XAndYAxis
drag.minimumX: 0
drag.maximumX: box.width - parent.width
drag.minimumY: 0
drag.maximumY: box.height - parent.width


Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support