Skip to main content

onclick

Description​

Fires on clicking a menu item or outside the menu

Usage​

onclick?: (ev: {
  context?: any;
  action: IMenuOption;   // @deprecated use `option` instead. Will be removed in v3.0 
  option: IMenuOption;   
  event?: MouseEvent;    
}) => void;

Parameters​

  • ev - an event object with the next parameters:
    • context - (optional) an object for which menu was called
    • action - (required) the object of selected (clicked) menu item, empty if menu was closed by an outside click (for the MenuOption parameters description refer to options)
    • option - (required) same as action
    • event - (optional) a native html event

Example​

<script>
  let menu1 = null;

  let message = "";
  function clicked(ev){
    const action = ev.action;
    message = action ? `clicked on ${action.id}` : "closed";
    menu1  = null;
  }
</script>

<div>{message}</div>

<div>
  <Button type="primary" onclick={ev => menu1 = ev.target}>Click me (bottom menu)</Button>
  {#if menu1}
  <Portal>
    <Menu {options} parent={menu1} onsome={clicked}></Menu>
  </Portal>
  {/if}
</div>

Details​

You can get an object of the clicked option inside the event as in the above example. The detail property of the event will contain an object related to the clicked menu item. When a user clicks outside the menu, the ev.action of the generated click event will be null.

Related article: Catching the change of a clicked option