如何使双重MouseArea生效? [英] How to make double MouseArea take effect?
问题描述
这是我的QML代码:
Rectangle
{
.....
Rectangle
{
....height and width is smaller than parent
MouseArea
{
id: mouseArea2
anchors.fill: parent
hoverEnabled: true
onEntered:
{
console.log("enter 2")
}
}
}
MouseArea
{
id: mouseArea1
anchors.fill: parent
hoverEnabled: true
onEntered:
{
console.log("enter 1")
}
}
}
仅mouseArea1
生效.如果删除mouseArea1
,则mouseArea2
生效.因此,我认为鼠标事件必须由mouseArea1
处理,并且不能将其传递给mouseArea2
.
Only mouseArea1
takes effect. If I remove mouseArea1
then mouseArea2
takes effect. So I think the mouse event must be handled by mouseArea1
and let it couldn't be passed to mouseArea2
.
我搜索了文档,以找出哪个attr可以防止这种行为,但没有发现.那么如何让mouseArea1
和mouseArea2
同时生效?
I search the document to find out which attr can prevent such behavior but nothing found. So how to let the mouseArea1
and mouseArea2
take effect at the same time?
推荐答案
对于组合"鼠标事件-clicked
,doubleClicked
和pressAndHold
–您可以使用
For "composed" mouse events -- clicked
, doubleClicked
and pressAndHold
-- you can achieve this using the propagateComposedEvents
property. But that won't work here because hover events are not composed events.
因此,您需要做的是更改MouseArea
的求值顺序.
So what you need to do instead is to change the order in which the MouseArea
s are evaluated.
一个简单的技巧是在QML源自身中交换两个MouseArea
的顺序.通过将较小的一个放在较大的一个之后,较小的一个优先:
One simple trick is to swap the order of the two MouseArea
s in the QML source itself. By placing the smaller one after the larger one, the smaller one takes precedence:
Rectangle{
//.....
MouseArea{
id: mouseArea1
anchors.fill: parent
hoverEnabled: true
onEntered:{
console.log("enter 1")
}
}
Rectangle{
//....height and width is smaller than parent
MouseArea{
id: mouseArea2
anchors.fill: parent
hoverEnabled: true
onEntered:{
console.log("enter 2")
}
}
}
}
实现相同目的的第二种方法是在最上面的MouseArea
上添加一个z
索引,该索引大于下面的索引.默认情况下,每个元素的z
索引为0
,因此只需将z: 1
添加到较小的MouseArea
即可达到目的:
A second method that achieves the same thing is to add a z
index to the topmost MouseArea
that's greater than the lower one. By default every element has a z
index of 0
, so just adding z: 1
to the smaller MouseArea
will do the trick:
Rectangle{
//.....
Rectangle{
//....height and width is smaller than parent
MouseArea{
z: 1 // <-----------------
id: mouseArea2
anchors.fill: parent
hoverEnabled: true
onEntered:{
console.log("enter 2")
}
}
}
MouseArea{
id: mouseArea1
anchors.fill: parent
hoverEnabled: true
onEntered:{
console.log("enter 1")
}
}
}
这篇关于如何使双重MouseArea生效?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!