[solved] How to make mouse area in mouse area



  • 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";
        }
    }
    

    }
    @


  • Moderators

    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"
    }
    

    }
    @



  • 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;
    
        }
    }
    

    }@



  • 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.


  • Moderators

    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();
            }
        }
    }
    

    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.