Adding "on click" adds the trigger to child nodes (_hyperscript)

Question

I'm trying to create a menu with state holding if the user has opened or collapsed a menu item, and it's child menu items states.

Thing is, that the _"on click" event is "added" to all the child elements. I can't find anything in the documentation about this, and my google fu is letting me down.

Here is the the code with the non wanted behaviour: Added temp solution at the bottom

https://jsfiddle.net/Donnydingel/au12zymv/13/

Embedded code does not seem to work when running, added anyway:

<aside class="w-64 p-5 flex flex-col h-screen">
    <ul class="menu bg-base-200 w-full flex-1 flex flex-col rounded-box">
        <li>
            <a>
                Home
            </a>
        </li>
        <li>
            <details id="menu-x-top" _="
                on click
                     halt the event's bubbling
                     handleMenuChanged(me) then
                init
                    menuLoad(me)
                ">
                <summary>
                    Stop - X
                </summary>
                <ul>
                    <li>
                        <a id="signals-should-not-log">
                            Signals - Should not trigger X click
                        </a>
                    </li>
                    <li>
                        <details id="menu-y-child" _="
                            on click
                                halt the event's bubbling
                                handleMenuChanged(me) then
                            init
                                menuLoad(me)
                        ">
                            <summary>Warnings - Y (X blocked)</summary>
                            <ul>
                                <li>
                                    <a>Active - Should not trigger Y click</a>
                                </li>
                                <li>
                                    <a>Inactive - Should not trigger Y click</a>
                                </li>
                            </ul>
                        </details>
                    </li>
                </ul>
            </details>
        </li>
        <li>
            <a>
                Addresses
            </a>
        </li>
    </ul>
</aside>


<script type="text/hyperscript">
  def handleMenuChanged(this)
    if this.open is false then
        sessionStorage.setItem(this.id, 'true')
    else
        log this.id then
        sessionStorage.setItem(this.id, 'false')
    end
end

def menuLoad(this)
    if sessionStorage.getItem(this.id) is null then
        sessionStorage.setItem(this.id, 'false')
    else
        if sessionStorage.getItem(this.id)  is 'true' then
            set this.open to 'open'
        end
    end
end  
</script>

As suggested by @mariodev, I moved the logic to the summary-element:

<details id="menu-x-top">
    <summary _="
        on click
            handleMenuChanged(me.parentElement)
        init
            menuLoad(me.parentElement)
    ">
        Stop
    </summary>
</details>

<script type="text/hyperscript">
    def handleMenuChanged(this)
        if this.open is false then
            sessionStorage.setItem(this.id, 'true')
        else
            sessionStorage.setItem(this.id, 'false')
        end
    end

    def menuLoad(this)
        if sessionStorage.getItem(this.id) is null then
            sessionStorage.setItem(this.id, 'false')
        else
            if sessionStorage.getItem(this.id)  is 'true' then
                set this.open to 'open'
            end
        end
    end
</script>

Answer 1

Moving the HS script to summary tag should solve the issue:

<details id="menu-x-top">
    <summary _="
        on click
            handleMenuChanged(me.parentElement)
        init
            menuLoad(me.parentElement)
    ">
        Stop
    </summary>
</details>