how to stopPropagation of click event in JSX?

[betterRunner]

by using vue-directiv the code <hsc-menu-item @click.stop()> works, but since I need to integrate it into another component that uses JSX render, so I have to change code to this onClick={(e) => { e.stopPropagation() }} but it seems that e is empty, any solution to solve it? Thanks.

[michitaro]

I'm not quite familiar with jsx but does this help you?

<hsc-menu-item vOn:click_stop={ ... } />

https://github.com/vuejs/jsx#directives

[betterRunner]

＠michitara, thanks for the reply. I meet some problems when installing the plugin as https://github.com/vuejs/jsx#directives told, I would check it later and then reply you.

[betterRunner]

@michitaro ,I tried a few times but the plugins are still not able to be integrated to my project, would you mind modifying the code to return the event object then I can manually call it outside? Many thanks.

[michitaro]

The line that emits click event is here. https://github.com/michitaro/vue-menu/blob/master/src/menuitem/script.ts#L120 As the line shows, the click event is indeed not a real MouseEvent but a pseudo one.

What exactly do you want to do? If you'd like to prevent mouse events from propagation, try the code below.

<div vOn:mousedown={ e => e.stopPropagation() } vOn:mouseup={ e => e.stopPropagation() }>
  <hsc-menu-item vOn:click={ ... } />
</div>

[betterRunner]

The strategy you proposed works that warping a div outside and call stopPropagation of it. Thanks.