QML---鼠标事件与鼠标事件穿透-Toy模板网

这篇具有很好参考价值的文章主要介绍了QML---鼠标事件与鼠标事件穿透。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

QML中MouseArea作为一个界面常用的类型，经常会出现鼠标区域重合的问题，这个时候会触发鼠标事件的只有最上层（可以设置Item的z属性来控制item的z序，而在其下层的鼠标事件则不会触发，但是往往开发者所想的是两个都触发，这个时候就需要鼠标事件穿透了。但是在先穿透之前，需要了解点东西，如下面的例子：

Item{
        anchors.fill: parent
        MouseArea{
            anchors.fill: parent
            onClicked: {
                console.log("onClicked")
            }
            onDoubleClicked: {
                console.log("onDoubleClicked")
            }
            onPressed: {
                console.log("onPressed")
            }

            onReleased: {
                console.log("onReleased")
            }

            onPressAndHold: {
                console.log("onClicked")
            }
        }
    }

上述代码将几个鼠标事件一起定义，运行程序点击一下会打印如下信息：

qml: onPressed
qml: onReleased
qml: onClicked

会发现打印了pressed released 和clicked的信息，这个时候会让人产生误解：

a.这三个鼠标事件是单独存在单独产生的

b.pressed和released一起构成了clicked

这个时候我们进行鼠标穿透进行检验，鼠标穿透的示例如下

MouseArea{
            anchors.fill: parent
            propagateComposedEvents: true
            onClicked: {
                console.log("onClicked")
                mouse.accepted = false
            }
}

在设置MouseArea的propagateComposedEvents:属性为true，之后再在想要穿透的事件里设置mouse.accepted = false，这样就能穿透了

这时我们来检验一下之前的问题,看如下代码

Item{
        anchors.fill: parent
        z:5
        MouseArea{
            anchors.fill: parent
            propagateComposedEvents: true
            onClicked: {
                console.log("onClicked")
                mouse.accepted = false
            }
            onDoubleClicked: {
                console.log("onDoubleClicked")
            }
            onPressed: {
                console.log("onPressed")
            }

            onReleased: {
                console.log("onReleased")
            }

        }
    }
    Item{
        anchors.fill: parent
        z:3
        MouseArea{
            anchors.fill: parent
            onClicked: {
                console.log("onClicked222")
            }
            onDoubleClicked: {
                console.log("onDoubleClicked222")
            }
            onPressed: {
                console.log("onPressed222")
            }

            onReleased: {
                console.log("onReleased222")
            }
        }
    }

让两个MouseArea进行重合然后让上层的clicked进行穿透，结果打印如下

qml: onPressed
qml: onReleased
qml: onClicked
qml: onClicked222

这个证明鼠标点击事件是单独存在的，那我们再修改代码如下

import QtQuick 2.15
import QtQuick.Controls 1.4
import QtQuick.Window 2.15

Window {
    id:id_root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Item{
        anchors.fill: parent
        z:5
        MouseArea{
            anchors.fill: parent
            propagateComposedEvents: true
            onClicked: {
                console.log("onClicked")
//                mouse.accepted = false
            }
            onDoubleClicked: {
                console.log("onDoubleClicked")
            }
            onPressed: {
                console.log("onPressed")
                mouse.accepted = false
            }

            onReleased: {
                console.log("onReleased")
                mouse.accepted = false
            }

        }
    }
    Item{
        anchors.fill: parent
        z:3
        MouseArea{
            anchors.fill: parent
            onClicked: {
                console.log("onClicked222")
            }
            onDoubleClicked: {
                console.log("onDoubleClicked222")
            }
            onPressed: {
                console.log("onPressed222")
            }

            onReleased: {
                console.log("onReleased222")
            }
        }
    }
}

这样修改只穿透pressed和released 不穿透clicked，运行点击，打印结果如下

qml: onPressed
qml: onPressed222
qml: onReleased222
qml: onClicked222

这就很有意思了，上层的clicked 事件和released事件没有被触发，而下层的clicked事件和released被触发了，按理来说我们没有穿透clicked事件下层clicked事件并会不执行，而且上层的released事件也神奇的消失了。

根据这个现象我将鼠标事件做了一个整理：

1.鼠标穿透本质是将鼠标传递下去，并且其内部保存的触发的对象的指针也会发生改变，因为released是要在pressed的基础上进行实现的，因为pressed的事件传递下去了，所以上层触发了pressed，传递到最下层时released，这个released就会被判定是在最下层发生的released所以上层的released就不会触发

2.鼠标事件的clicked是由pressed和released组成，当在这个item上同时触发了这两个事件，就会产生clicked事件，所以当同时穿透pressed 、released时，虽然没有穿透clicked但是最下层收到了pressed和releassed，所以最下层会产生clicked，同时上层因为收不到released所以上层不会触发clicked文章来源地址https://www.toymoban.com/news/detail-491875.html

到了这里，关于QML---鼠标事件与鼠标事件穿透的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！