How to make outer rectangle clickable if inner elements made are also cliclable.

The problem is that I am not able to figure out how to implement mousearea on outer element if inner elements made by me also use mousearea and do some some action on being clicked. As soon as i apply mousearea on outer rectangle the whole thing becomes unclickable and no action takes place on the click.

Code for big cell

Code:

import Qt 4.7
 
/*This is used as a container to the bigger cell in the my recommendation list.*/
Item {
    id: bigButton
    signal bigTileClicked
    property string tipText
    property string tipTitle
    property string tipId
    property string tipStatus
    width: 519
    height: 308
 
    Rectangle
    {
        id:innerRect
        x:0
        y:0
    /*This is used to display the image of the big cell.*/
    Image {
            id:bigTile
            x:0
            y:0
            width: 519
            height: 308
            source: "ui_images/BigCell.png"
            opacity: 1
            smooth: true
 
            /*Here RemindMeCell is used to create button on the big cell. */
            RemindMeCell{
                        id:highlightTile
                        x:131
                        y:254
                        buttonText: "Remind me to do this!"
                        onClicked: allReminderSlotClass.topRecommendationDetails(bigButton.tipId,buttonText);
            }
 
            /*Here trash can button is create on the big tile to create Trash can button.*/
            TrashCanCell{
                id:trashCanTile
                x:465
                y:254
                onClicked:allReminderSlotClass.getClickedTipValueForTipPop(tipId,tipTitle);
            }
 
        /* This is the text of the of the status of the reminder.*/
        Text {
            id: stausText
            text: bigButton.tipTitle
            color: "orange"
            x:15
            y:5
            wrapMode: Text.Wrap
            horizontalAlignment: Text.AlignLeft
        }
 
        /*This is the text for the reminder of the big tile. */
        Text {
            id: text
            text: bigButton.tipText
            color: "white"
            x:15
            y:30
            font.pixelSize: 14
            font.pointSize:12
            width: 500
            height: 200
            wrapMode: Text.Wrap
            horizontalAlignment: Text.AlignLeft
        }
        /*This is applied on the outer container to make the cell clickable*/
 
     }
    /*This is applied on the outer container to make the cell clickable*/
   MouseArea {
       id: bigCellMouseArea
       anchors.fill: parent
       //anchors.top: innerRect.top
       //anchors.bottom: text.top
       //anchors.left: highlightTile.left
       onClicked: {
           allReminderSlotClass.getReminder("big cell");
       }
   }
  }
 
     /*This is applied on the outer container to make the cell clickable*/
//    MouseArea {
//        id: bigCellMouseArea1
//        anchors.fill: parent
////        anchors.top: parent.top
////        //anchors.bottom: text.top
////        anchors.left: highlightTile.left
//        onClicked: {
//            allReminderSlotClass.getReminder("big cell");
//        }
//    }
   }

Code for PrimaryButton which is also clickable

Code:

import Qt 4.7
 
Rectangle {
    id:mainRect
    width: primary_button.width
    height: 42
 
    FontLoader { id: whitney; name: "Whitney" }
     property string tipIdValue
    property string buttonText//: "The Quick brown fox Jumped Over the Lazy Dog"
    color: "#323232"
 
    Rectangle {
        id: primary_button
 
        //property string text: "The Quick brown fox Jumped Over the Lazy Dog"
 
        signal clicked
 
        //anchors.centerIn: parent
 
        //width: buttonLabel.width + 20
        width: {if((buttonLabel.width + 20) < 265)
                    return 265;
                }
        height: 42
 
        color: parent.color
 
        smooth: true
 
        // Default state
        state: "enabled"
 
        Rectangle {
 
            id:primary_button_enabled
//            width: {if((buttonLabel.width + 20) < 265)
//                        return 265;
//                    }
            // Create left end cap enabled
            Image {
                id: left_cap_enabled
                source: "ui_images/button_primary_normal_enabled_left_side.png"
                anchors.right: parent.left
            }
 
            // Create center fill enabled
            Image {
                id: center_fill_enabled
                source: "ui_images/button_primary_normal_enabled_center_tile.png"
                anchors.left: left_cap_enabled.right
                fillMode: Image.Tile
                //width: buttonLabel.width + 20
                            width: {if((buttonLabel.width + 20) < 265)
                                        return 265;
                                    }
            }
 
            // Create right end cap enabled
            Image {
                id: right_cap_enabled
                source: "ui_images/button_primary_normal_enabled_right_side.png"
                anchors.left: center_fill_enabled.right
            }
 
        }
 
        Rectangle {
 
            id:primary_button_pressed
 
            // Create left end cap pressed
            Image {
                id: left_cap_pressed
                source: "ui_images/button_primary_normal_pressed_left_side.png"
                anchors.right: parent.left
            }
 
            // Create center fill pressed
            Image {
                id: center_fill_pressed
                source: "ui_images/button_primary_normal_pressed_center_tile.png"
                anchors.left: left_cap_pressed.right
                fillMode: Image.Tile
                //width: buttonLabel.width + 20
                width: {if((buttonLabel.width + 20) < 265)
                            return 265;
                        }
            }
 
            // Create right end cap pressed
            Image {
                id: right_cap_pressed
                source: "ui_images/button_primary_normal_pressed_right_side.png"
                anchors.left: center_fill_pressed.right
            }
 
        }
 
 
        Rectangle {
 
            id:primary_button_disabled
 
            // Create left end cap disabled
            Image {
                id: left_cap_disabled
                source: "ui_images/button_primary_normal_disabled_left_side.png"
                anchors.right: parent.left
            }
 
            // Create center fill disabled
            Image {
                id: center_fill_disabled
                source: "ui_images/button_primary_normal_disabled_center_tile.png"
                anchors.left: left_cap_disabled.right
                fillMode: Image.Tile
               // width: buttonLabel.width + 20
                width: {if((buttonLabel.width + 20) < 265)
                            return 265;
                        }
            }
 
            // Create right end cap disabled
            Image {
                id: right_cap_disabled
                source: "ui_images/button_primary_normal_disabled_right_side.png"
                anchors.left: center_fill_disabled.right
            }
 
        }
 
 
        MouseArea {
            id: mouseArea
            anchors.fill: parent  //onClicked: container.clicked()
            onPressed: primary_button.state = "pressed"
            onReleased: primary_button.state = "enabled"
            //onClicked: primary_button.state = "pressed"
            onClicked:popUpSlot.clickedDetails(tipIdValue,buttonText) //primary_button.clicked()
        }
 
        Text {
            id: buttonLabel
            text: mainRect.buttonText
            anchors.centerIn: primary_button
            color: "white"
            font.family: "Whitney-Medium"
            font.pixelSize: 14
            //font.capitalization: Font.Capitalize
        }
 
 
        states: [
            State {
                name: "enabled"
                PropertyChanges { target: primary_button_enabled; visible:true; }
                PropertyChanges { target: primary_button_pressed; visible:false; }
                PropertyChanges { target: primary_button_disabled; visible:false; }
                PropertyChanges { target: buttonLabel; color:"white"; }
                PropertyChanges { target: mouseArea; enabled:true; }
            },
            State {
                name: "pressed"
                PropertyChanges { target: primary_button_enabled; visible:false; }
                PropertyChanges { target: primary_button_pressed; visible:true; }
                PropertyChanges { target: primary_button_disabled; visible:false; }
                PropertyChanges { target: buttonLabel; color:"white"; }
                PropertyChanges { target: mouseArea; enabled:true; }
            },
            State {
                name: "disabled"
                PropertyChanges { target: primary_button_enabled; visible:false; }
                PropertyChanges { target: primary_button_pressed; visible:false; }
                PropertyChanges { target: primary_button_disabled; visible:true; }
                PropertyChanges { target: buttonLabel; color:"#797979"; }
                PropertyChanges { target: mouseArea; enabled:false; }
            }
 
        ]
 
 
    }
 
}

Now the problem is that if the code of mousearea which is commented in bigcell code at the bottom, if that is uncommented the buttons 4 of them stop being clicked. Any solutions....