<menupopup id="top" onpopuphidden="console.log('The onpopuphidden method of id=top was called.');"> <menuitem label="item 1"/> <menuitem label="item 2"/> <menu id="submenu1" label="submenu 1"> <menupopup id="submenu1-popup"> <menuitem label="submenu1 item 1"/> <menuitem label="submenu1 item 2"/> </menupopup> </menu> <menu id="submenu2" label="submenu 1"> <menupopup id="submenu2-popup"> <menuitem label="submenu2 item 1"/> <menuitem label="submenu2 item 2"/> </menupopup> </menu> <menupopup/>
With the above structure, the onpopuphidden method of <menupopup id="top">
will be called every time either <menupopup id="submenu1-popup">
or <menupopup id="submenu2-popup">
are hidden. This results in the method repeatedly called as the user runs the mouse up and down the menu opening the sub-menus. You can test for the current popup actually being hidden with:
<menupopup id="top" onpopuphidden="if(this.state != 'open'){console.log('The onpopuphidden method of id=top was called.');};" >