Vue: @click.prevent.self does not prevent all click

Created on 11 Dec 2018  路  4Comments  路  Source: vuejs/vue

Version

2.5.17

Reproduction link

https://jsfiddle.net/jtandy/eywraw8t/501804/

Steps to reproduce

step 1: open console panel in chrome
step 2: click the link "https://cn.vuejs.org"

What is expected?

@click.prevent.self will prevent all clicks. no response to click the link

What is actually happening?

click is executed and print the result in console panel

Most helpful comment

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()

All 4 comments

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.

from https://vuejs.org/v2/guide/events.html

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

Was this page helpful?
0 / 5 - 0 ratings