VUE初长成【vue 事件修饰符】

vue 事件修饰符

methods: {
    divclick(str) {
        console.log(str)
    }
}

默认点击最里面的 inner

.stop 防止事件冒泡

.stop 阻止单击事件继续传播, 阻止事件向父元素传递，阻止任何父事件处理程序被执行

<div id="divclick" style="padding: 50px;border: 1px solid" @click="divclick('outer')">
    <div style="padding: 40px;border: 1px solid" @click="divclick('middle')">
        <div style="padding: 30px;border: 1px solid" @click.stop="divclick('inner')"></div>
    </div>
</div>

输出结果：

inner

.prevent 自身默认事件

.prevent 某些标签拥有自身的默认事件( <a> 跳转, <form> 表单提交等)
此类默认事件不会因为 .stop 而停止执行

<div id="divclick" style="padding: 50px;border: 1px solid" @click="divclick('outer')">
    <a href="#divclick" @click.prevent>
        <div style="padding: 30px;border: 1px solid" @click="divclick('inner')"></div>
    </a>
</div>

输出结果：页面不会跳转

inner
outer

.capture 捕获冒泡

带有 .capture 修饰符的 dom 元素会 优先执行, 然后再按正常顺序执行触发的事件

<div id="divclick" style="padding: 50px;border: 1px solid" @click="divclick('outer')">
    <div style="padding: 40px;border: 1px solid" @click.capture="divclick('middle')">
        <div style="padding: 30px;border: 1px solid" @click="divclick('inner')"></div>
    </div>
</div>

输出结果：

middle
inner
outer

带有多个 .capture 修饰符的 从外到内 依次执行，然后再按 正常顺序 执行触发的事件。

<div id="divclick" style="padding: 50px;border: 1px solid" @click="divclick('outer')">
    <div style="padding: 40px;border: 1px solid" @click.capture="divclick('middle')">
        <div style="padding: 30px;border: 1px solid" @click.capture="divclick('inner')">
            <div style="padding: 30px;border: 1px solid" @click="divclick('a inner')"></div>
        </div>
    </div>
</div>

输出结果：

// 外序
middle      // .capture
inner       // .capture
// 内序
a inner
outer

.self 阻止自身事件

.self 只当在 event.target 是 当前元素自身时 触发处理函数
将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响。

<div id="divclick" style="padding: 50px;border: 1px solid" @click="divclick('outer')">
    <div style="padding: 40px;border: 1px solid" @click.self="divclick('middle')">
        <div style="padding: 30px;border: 1px solid" @click="divclick('inner')"></div>
    </div>
</div>

输出结果：
点击 inner

inner
outer

点击 middle

middle
outer

@click.prevent.self 和 @click.self.prevent 区别

@click.prevent.self 自身事件会被阻止，包括自身默认事件(如 a 标签不会跳转)
@click.self.prevent 自身事件会被阻止，不包括自身默认事件(如 a 标签会跳转)

<div id="divclick" style="padding: 50px;border: 1px solid" @click="divclick('outer')">
    <div id="selfclick" style="padding: 40px;border: 1px solid" @click="divclick('middle')">
        <a href="#selfclick" @click.prevent.self="divclick(inner)">
            <div style="padding: 30px;border: 1px solid" @click="divclick('inner1')">@click.prevent.self</div>
        </a>
        <a href="#selfclick" @click.self.prevent="divclick(inner)">
            <div style="padding: 30px;border: 1px solid" @click="divclick('inner2')">@click.self.prevent</div>
        </a>
    </div>
</div>

输出结果：
点击 @click.prevent.self 不会跳转

inner1
middle
outer

点击 @click.self.prevent 会跳转

inner2
middle
outer

.once 一次事件

带有 .once 修饰符的事件只触发一次，但是不影响事件的冒泡，上层的事件仍然会被触发，并且页面刷新后这个次数会重置。
.once 修饰符还能被用到自定义的组件事件上。

.passive 不阻止默认事件

滚动事件的默认行为 (滚动行为) 会立即触发, 而不是等 onScroll 完成(这其中包含 event.preventDefault() 的情况)
.passive 修饰符能够提升移动端的性能。
.passive 会告诉浏览器你不想阻止事件的默认行为。不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。
浏览器只会在每次触发监听器的时候，才去判断这次是否有调用 preventDefault() 来阻止默认行为。这样的判断，在某些场景下会影响交互，像用户通过手势滑动页面时，就没法迅速滚动了，而使用 .passive 就可以提前告诉浏览器，我们没有用 preventDefault 阻止默认动作，你也不用反复去判断了，从而提高性能解决卡顿。