How to get nested event

[concocon]

I have a small code below.
I want to receive both event when click Touch Area and Button, but I got only one event from TouchArea.
Please guide me how to get both event

import { Button, VerticalBox } from "std-widgets.slint";
export component Demo {
    property <bool> screen-saver;
    property <int> value: 0;
    VerticalBox {
        alignment: start;
        Text {
            text: "Hello World!";
            font-size: 24px;
            horizontal-alignment: center;
        }
        HorizontalLayout { alignment: center;
         Button { text: "Enable screen saver" + value; 
         clicked => { root.value = root.value  -1} } }
    }
     TouchArea {
        clicked => { root.value = root.value +1}
        Text {
        text: "screen saver on" + value;
        }
        pointer-event => {
        return false;
        }
  }
}

[foxbecoding]

@concocon Hi were you able to find a solution? I am having the same issue.

[hunger]

I am afraid there is no good solution here: The TouchArea covers the Button and gets all the events. You would need to move the Button in front of the TouchArea.

[foxbecoding]

@hunger You're absolutely right. The parent TouchArea indeed has to come before all others. I forgot to post this but here's a solution I came up with a couple of days ago. I made the parent component inherit TouchArea which seems to work out just fine.

Check out the log output: https://github.com/user-attachments/assets/2fe21927-d579-4aaf-b2ff-55cfc224246e

export component AccountListItem inherits TouchArea {
    in property <Account> account;
    in property <color> background_color;
    
    clicked => {
        debug("Item clicked")
    }
    
    item := Rectangle {
        background: background_color;
        border-radius: 9px;
        VerticalBox {
            alignment: center;
            Rectangle {
                height: 48px;
                HorizontalLayout {
                    alignment: space-between;
                    VerticalLayout {
                        alignment: center;
                        width: 300px;
                        Text {
                            font-size: 21px;
                            font-weight: 500;
                            text: account.name;
                            color: Palette.foreground.with-alpha(0.85);
                            horizontal-alignment: left;
                            overflow: TextOverflow.elide;
                        }
                    }

                    VerticalLayout {
                        alignment: center;
                        width: 300px;
                        HorizontalLayout {
                            alignment: start;
                            spacing: 9px;
                            Text {
                                font-size: 21px;
                                font-weight: 500;
                                text: account.pubkey_display;
                                color: Palette.foreground.with-alpha(0.85);
                                horizontal-alignment: left;
                            }
                            IconButton {
                                icon: @image-url("../../../assets/icons/open-icon.svg");
                                clicked => {
                                    debug("Button Clicked")
                                    //AccountManager.view_account(account.pubkey)
                                }
                            }
                        }
                    }

                    VerticalLayout {
                        alignment: center;
                        width: 200px;
                        HorizontalLayout {
                            alignment: start;
                            spacing: 9px;
                            Image {
                                source: @image-url("../../../assets/icons/solana-icon.svg");
                                width: 21px;
                                horizontal-alignment: left;
                            }
                            Text {
                                font-size: 21px;
                                font-weight: 500;
                                text: "\{account.balance}";
                                color: Palette.foreground.with-alpha(0.85);
                                horizontal-alignment: left;
                            }
                        }
                    }
                }
            }
        }
    }

    states [
        pressed when root.pressed: {
            item.opacity: 0.7;
            item.background: Palette.alternate-background;
        }
        hover when root.has-hover: {
            item.opacity: 0.7;
            item.background: Palette.alternate-background.brighter(0.10);
        }
    ]
}