When I looked at the vue document today, I didn’t understand a part of the event modifiers. I wrote a demo to test it. Some newbies learned from each other.
The questions are as follows:
What does emmm mean?
The demo of v-on:click.prevent.self is as follows:
<div id="box"> <div @click="alert(1)"> <a href="/#" @click="alert(2)">a标签 <div @click="alert(3)">div标签</div> </a> </div> </div>At this time, clicking the a label will pop up 2, 1, and jump in sequence. Clicking the div tag will pop up 3, 2, 1, and jump in sequence. This happened to bubbling up.
Let's take a look after adding v-on:click.prevent.self :
<div @click="alert(1)"> <a href="/#" @click.prevent.self="alert(2)">a标签 <div @click="alert(3)">div标签</div> </a> </div>At this time, clicking the a label will pop up 2, 1 in turn. Clicking on the div tag will pop up 3 and 1 in turn. At this time, you have discovered that the a tag not only does not bubbling, but also does not jump. This is what the official website says will prevent all clicks.
The demo of v-on:click.self.prevent is as follows:
<div @click="alert(1)"> <a href="/#" @click.self.prevent="alert(2)">a标签 <div @click="alert(3)">div标签</div> </a> </div>Clicking on the div tag will pop up 3, 1 and jump in sequence. At this time, the a tag did not respond to the pop-up box, but a jump occurred. This is what the official website said will only prevent clicking on the element itself .
---------------------
Author: bug bacteria
Source: CSDN
Original: https: //blog.csdn.net/qq_39105508/article/details/83008604