Skip to main content

handler

Description​

provides a custom trigger for Context Menu

Type​

function

Example​

<script>
    var activate = null;
</script>

<ContextMenu {options} bind:handler={activate} />

<div class="item" on:click={activate} data-context-id={item.id}></div>

Details​

The use of the handler function is not limited to the click event, as in the above example. You can use on:contextmenu or any other DOM event. 

// shows a menu manually with a DOM event 
activate(ev);

It is also possible to show ContextMenu from a custom code. It is important that the first argument will be an object that contains a target or the clientX/clientY coordinates. For example:

// shows a menu with a "fake" event related to the node 
activate({ target: DOMTarget });
// at a specific position 
activate({ clientX: 100, clientY: 100 });

// if the necessary handler can receive the related item as well 
// this value will be returned as the item's parameter in the click event 
activate(ev, item);

Related article: Custom triggering of ContextMenu