1  import QtQuick 2.12
2  import QtQuick.Window 2.12
3  import QtQuick 2.4
4  Window {
5      width: 640
6      height: 480
7      visible: true
8      title: qsTr("MouseArea Example")
9      Rectangle {
10        id: box
11        width: 640
12        height: 480
13        Rectangle {
14            id: redSquare
15            width: 120; height: 120
16            anchors.top: parent.top; anchors.left: parent.left; anchors.margins: 10
17            color: "red"
18            opacity: redSquareMouseArea.containsPress ? 0.6 : 1.0

19            Text { text: "Click"; font.pixelSize: 16; anchors.centerIn: parent }

20            MouseArea {
21                id: redSquareMouseArea
22                anchors.fill: parent
23                hoverEnabled: true
24                property string buttonID

25                acceptedButtons: Qt.AllButtons
26                // Value 'All.Buttons' is eqivalent to:
27                // 'Qt::LeftButton | Qt::RightButton | Qt::MiddleButton  .... | Qt::ExtraButton24'

28                onEntered: info.text = 'Entered'
29                onExited: info.text = 'Exited (pressed=' + pressed + ')'

30                onPressed: (mouse) => {
31                    if (mouse.button === Qt.LeftButton)
32                        buttonID = 'LeftButton'
33                    else if (mouse.button === Qt.RightButton)
34                        buttonID = 'RightButton'
35                    else if (mouse.button === Qt.MiddleButton)
36                        buttonID = 'MiddleButton'
37                    else if (mouse.button === Qt.BackButton)
38                        buttonID = 'BackButton'
39                    else if (mouse.button === Qt.ForwardButton)
40                        buttonID = 'ForwardButton'
41                    else if (mouse.button === Qt.TaskButton)
42                        buttonID = 'TaskButton'
43                    else if (mouse.button === Qt.ExtraButton4)
44                        buttonID = 'ExtraButton4'
45                    else if (mouse.button === Qt.ExtraButton5)
46                        buttonID = 'ExtraButton5'
47                    else if (mouse.button === Qt.ExtraButton6)
48                        buttonID = 'ExtraButton6'
49                    else if (mouse.button === Qt.ExtraButton7)
50                        buttonID = 'ExtraButton7'
51                    else if (mouse.button === Qt.ExtraButton8)
52                        buttonID = 'ExtraButton8'
53                    else if (mouse.button === Qt.ExtraButton9)
54                        buttonID = 'ExtraButton9'
55                    else if (mouse.button === Qt.ExtraButton10)
56                        buttonID = 'ExtraButton10'
57                    else if (mouse.button === Qt.ExtraButton11)
58                        buttonID = 'ExtraButton11'
59                    else if (mouse.button === Qt.ExtraButton12)
60                        buttonID = 'ExtraButton12'
61                    else if (mouse.button === Qt.ExtraButton13)
62                        buttonID = 'ExtraButton13'
63                    else if (mouse.button === Qt.ExtraButton14)
64                        buttonID = 'ExtraButton14'
65                    else if (mouse.button === Qt.ExtraButton15)
66                        buttonID = 'ExtraButton15'
67                    else if (mouse.button === Qt.ExtraButton16)
68                        buttonID = 'ExtraButton16'
69                    else if (mouse.button === Qt.ExtraButton17)
70                        buttonID = 'ExtraButton17'
71                    else if (mouse.button === Qt.ExtraButton18)
72                        buttonID = 'ExtraButton18'
73                    else if (mouse.button === Qt.ExtraButton19)
74                        buttonID = 'ExtraButton19'
75                    else if (mouse.button === Qt.ExtraButton20)
76                        buttonID = 'ExtraButton20'
77                    else if (mouse.button === Qt.ExtraButton21)
78                        buttonID = 'ExtraButton21'
79                    else if (mouse.button === Qt.ExtraButton22)
80                        buttonID = 'ExtraButton22'
81                    else if (mouse.button === Qt.ExtraButton23)
82                        buttonID = 'ExtraButton23'
83                    else if (mouse.button === Qt.ExtraButton24)
84                        buttonID = 'ExtraButton24'

85                    info.text = 'Pressed (' + buttonID + ' shift='
                        + (mouse.modifiers & Qt.ShiftModifier ? 'true' : 'false') + ')'
86                    var posInBox = redSquare.mapToItem(box, mouse.x, mouse.y)
87                    posInfo.text = + mouse.x + ',' + mouse.y + ' in square'
                            + ' (' + posInBox.x + ',' + posInBox.y + ' in window)'
88                }

89                onReleased: (mouse) => {
90                    btn.text = 'Released (isClick=' + mouse.isClick + ' wasHeld=' + mouse.wasHeld + ')'
91                    posInfo.text = ''
92                }

93                //! [clicks]
94                onPressAndHold: btn.text = 'Press and hold'
95                onClicked: (mouse) => { btn.text = 'Clicked (wasHeld=' + mouse.wasHeld + ')' }
96                onDoubleClicked: btn.text = 'Double clicked'
97                //! [clicks]
98            }
99        }

100       Rectangle {
101           id: blueSquare
102           width: 120; height: 120
103           x: box.width - width - 10; y: 10    // making this item draggable, so don't use anchors
104           color: "blue"

105           Text { text: "Drag"; font.pixelSize: 16; color: "white"; anchors.centerIn: parent }

106           MouseArea {
107                anchors.fill: parent
108                //! [drag]
109                drag.target: blueSquare
110                drag.axis: Drag.XAndYAxis
111                drag.minimumX: 0
112                drag.maximumX: box.width - parent.width
113                drag.minimumY: 0
114                drag.maximumY: box.height - parent.height
115                //! [drag]
116           }
117        }

118        Text {
119            id: info
120            anchors.bottom: btn.top; anchors.horizontalCenter: parent.horizontalCenter; anchors.margins: 20

121            onTextChanged: console.log(text)
122        }

123        Text {
124            id: btn
125            anchors.bottom: posInfo.top; anchors.horizontalCenter: parent.horizontalCenter; anchors.margins: 20
126        }

127        Text {
128            id: posInfo
129            anchors.bottom: parent.bottom; anchors.horizontalCenter: parent.horizontalCenter; anchors.margins: 20
130        }
131    }

132 }
