2.5.17
https://jsfiddle.net/jtandy/eywraw8t/501804/
step 1: open console panel in chrome
step 2: click the link "https://cn.vuejs.org"
@click.prevent.self will prevent all clicks. no response to click the link
click is executed and print the result in console panel
Order matters when using modifiers because the relevant code is generated in the same order. Therefore using v-on:click.prevent.self will prevent all clicks while v-on:click.self.prevent will only prevent clicks on the element itself.
The element <a> has the default browser action that it will open the webpage referred in the hrefproperty. The .prevent prevents this default behavior, however it does not stop the propagation of the click event to the parent elements and does not disable the custom event handler set on this element.
More info about event.preventDefault()
This is working as expected.
This is working as expected.
Thanks for comments. I think "using v-on:click.prevent.self will prevent all clicks" in official document is misleading for green hands
Most helpful comment
The element
<a>has the default browser action that it will open the webpage referred in thehrefproperty. The.preventprevents this default behavior, however it does not stop the propagation of the click event to the parent elements and does not disable the custom event handler set on this element.More info about event.preventDefault()