鼠标事件

A more modern way of handling events from all pointing devices, including mouse and touchscreen, is via 输入处理程序 . This page describes the original Qt Quick MouseArea type, which was initially designed to handle mouse input, and later began handling single-touch events (in the form of synthetic mouse events) in simple touch-oriented user interfaces.

鼠标类型

MouseArea type
MouseEvent 对象

鼠标事件处理

QML uses signals and handlers to deliver mouse interactions. Specifically, Qt Quick provides the MouseArea and MouseEvent types that allow developers to define JavaScript callbacks (also called signal handlers), which accept mouse events within a defined area.

定义鼠标区域

The MouseArea type receives events within a defined area. One quick way to define this area is to anchor the MouseArea to its parent's area using the anchors.fill property. If the parent is a Rectangle (or any Item component), then the MouseArea will fill the area defined by the parent's dimensions. Alternatively, an area smaller or larger than the parent is definable.

Rectangle {
    id: button
    width: 100; height: 100
    MouseArea {
        anchors.fill: parent
        onClicked: console.log("button clicked")
    }
    MouseArea {
        width:150; height: 75
        onClicked: console.log("irregular area clicked")
    }
}

接收事件

The MouseArea type emits signals in response to different mouse events. The MouseArea type documentation describes these gestures in greater detail:

canceled
clicked
doubleClicked
entered
exited
positionChanged
pressAndHold
pressed
released

These signals can have callbacks that are invoked when the signals are emitted.

    MouseArea {
        anchors.fill: parent
        onClicked: console.log("area clicked")
        onDoubleClicked: console.log("area double clicked")
        onEntered: console.log("mouse entered the area")
        onExited: console.log("mouse left the area")
    }

启用手势

Some mouse gestures and button clicks need to be enabled before they send or receive events. Certain MouseArea and MouseEvent properties enable these gestures.

To listen to (or explicitly ignore) a certain mouse button, set the appropriate mouse button to the acceptedButtons 特性。

Naturally, the mouse events, such as button presses and mouse positions, are sent during a mouse click. For example, the containsMouse property will only retrieve its correct value during a mouse press. The hoverEnabled will enable mouse events and positioning even when there are no mouse button presses. Setting the hoverEnabled 特性到 true , in turn will enable the entered , exited ，和 positionChanged signal and their respective signal handlers.

    MouseArea {
        hoverEnabled: true
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        onEntered: console.log("mouse entered the area")
        onExited: console.log("mouse left the area")
    }

Additionally, to disable the whole mouse area, set the MouseArea 被启用 特性到 false .

MouseEvent 对象

Signals and their callbacks receive a MouseEvent object as a parameter. The mouse object contains information about the mouse event. For example, the mouse button that started the event is queried through the mouse.button 特性。

The MouseEvent object can also ignore a mouse event using its accepted 特性。

接受进一步信号

Many of the signals are sent multiple times to reflect various mouse events such as double clicking. To facilitate the classification of mouse clicks, the MouseEvent object has an accepted property to disable the event propagation.

To learn more about QML's event system, please read the 信号和处理程序，及事件系统文档。