【vue】事件修饰符事件（v.stop 和v.prevent）

一、v.stop
作用 ：阻止事件冒泡

<div @click="alert(1)">
	<div @click="alert(2)">第二个</div>
</div>

此时点击第二个 div 弹出的顺序为 2 1

<div @click="alert(1)">
	<div @click.stop="alert(2)">第二个</div>
</div>

弹出的就只有2

二，v.prevent
作用 阻止事件

v-on:click.prevent.self的demo如下：

<div id="box"> 
    <div @click="alert(1)">
        <a href="/#" @click="alert(2)">a标签
          <div @click="alert(3)">div标签</div>
        </a>
    </div>
</div>

此时点击a标签会依次弹出2，1，跳转。点击div标签会依次弹出3，2，1，跳转。这发生了事件冒泡。

咱们看一下加上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>

此时点击a标签会依次弹出2，1。点击div标签会依次弹出3，1。此时各位看官已经发现，a标签不仅没有冒泡，也没有跳转，这就是官网说的会阻止所有的点击。

v-on:click.self.prevent的demo如下：
            <div @click="alert(1)">
                  <a href="/#" @click.self.prevent="alert(2)">a标签
                  <div @click="alert(3)">div标签</div>
                </a>
            </div>

点击div标签会依次弹出3，1，跳转。此时a标签没有响应弹框，但是发生了跳转，这就是官网说的只会阻止对元素自身的点击。