[solved] How to make mouse area in mouse area

depecheSoul

Hello. I have two rectangles, where one is inside another. How can I make that first rectangle has its own mouse area, and a second has its mouse area, and where one doesn't effect other.

I have made a simple example to show you what I want to say.

@
Rectangle {
width: 360
height: 360

Rectangle {
    width: 100
    height: 100
    id: rectangleInCenter;
    color: "red"
    anchors.centerIn: parent
    MouseArea {
        onClicked: textForChange.color="red";
    }
}

Text {
    id: textForChange;
    anchors.centerIn: parent
    text: "Hello World"
}

MouseArea {
    anchors.fill: parent
    onClicked: {
        textForChange.color="blue";
    }
}

}
@

mlong

Try:
@
Rectangle {
width: 360
height: 360

// Make the "big" MouseArea first, because they will be created in the order specified.
// Since it was previously specified last, it had been "covering up" the smaller mouse area.
MouseArea {
anchors.fill: parent
onClicked: {
textForChange.color="blue";
}
}

Rectangle {
    width: 100
    height: 100
    id: rectangleInCenter;
    color: "red"
    anchors.centerIn: parent

    MouseArea {
        // Make sure this MouseArea has a size.  It was infinitely small before
        anchors.fill: parent      
        onClicked: textForChange.color="red";
    }
}

Text {
    id: textForChange;
    anchors.centerIn: parent
    text: "Hello World"
}

}
@

X-Krys

Alternatively, you can forward the vent from the big mouse area to the small one even if it is under with mouseAccepted property.

@Rectangle {
width: 360
height: 360

Rectangle {
    width: 100
    height: 100
    id: rectangleInCenter;
    color: "red"
    anchors.centerIn: parent
    MouseArea {
        onClicked: textForChange.color="red";
    }
}

Text {
    id: textForChange;
    anchors.centerIn: parent
    text: "Hello World"
}

MouseArea {
    anchors.fill: parent
    onClicked: {
        textForChange.color="blue";
        // this will forward Press event to underlying items
        mouse.accepted = false;

    }
}

}@

Panke

Sorry for hijacking this post, but I have the very same problem. Sadly the proposed solution seems not to work, so what can I do?

Here is my simple code.

@
// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1

Rectangle {
height: 100; width: 100
color: "blue";

MouseArea
{
    anchors.fill: parent
    onClicked: {  console.log("blue"); }
}

Rectangle
{
    anchors.centerIn: parent
    height: 50; width: 50
    color: "red"
    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            console.log("red");
            mouse.accepted = false;
        }
    }
}

}
@

I want that clicking in the red area prints "blue" as well. But I can't manage to do it.

mlong

Per the MouseArea onClicked: documentation:

bq. The accepted property of the MouseEvent parameter is ignored in this handler.

You could make a function in your original MouseArea and call it from both MouseArea's onClicked: handlers...

@
import QtQuick 1.1

Rectangle {
height: 100; width: 100
color: "blue";

MouseArea
{
    id: a
    function doclick() { console.log("blue"); }
    anchors.fill: parent
    onClicked: {  doclick(); }
}

Rectangle
{
    anchors.centerIn: parent
    height: 50; width: 50
    color: "red"
    MouseArea
    {
        anchors.fill: parent
        onClicked:
        {
            console.log("red");
            a.doclick();
        }
    }
}

}
@