vue中的事件修饰符

不使用修饰符情况

执行结果：点击了子元素；点击了父元素

<template>
  <div class="box" @click="e_ParentChilk">
    <span @click="e_ChildClick" style="color:red;">点击</span>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    e_ChildClick() {
      console.log("点击了子元素！");
    },
    e_ParentChilk() {
      console.log("点击了父元素！");
    },
  },
};
</script>

stop - 阻止事件冒泡

执行结果：点击了子元素（未触发父元素点击事件）

<template>
  <div class="box" @click="e_ParentChilk">
    <span @click.stop="e_ChildClick" style="color:red;">子元素</span>
  </div>
</template>

capture - 使用事件捕获

执行结果：点击了父元素；点击了子元素；（父元素的点击事件先执行）

<template>
  <div class="box" @click.capture="e_ParentChilk">
    <span @click="e_ChildClick" style="color:red;">子元素</span>
  </div>
</template>

prevent - 阻止默认行为

// 默认行为一：阻止a标签跳转
<a @click.prevent href="http://www.baidu.com">按钮</a>
// 默认行为二：阻止checkbox选中
<input type="checkbox" @click.prevent>
// 默认行为三：阻止表单提交（点击submit按钮时，未执行提交事件）
<form action=""  @click.prevent>
    <input type="submit" value="提交"/>
</form>

self - 只有当元素自身时触发此函数，而不是子元素

点击“子元素”时只触发了子元素的点击事件，只有点击“子元素自身而非子元素”时，触发父元素的点击事件

<template>
  <div class="box" @click.self="e_ParentChilk">
    元素自身而非子元素
    <span @click="e_ChildClick" style="color:red;">子元素</span>
  </div>
</template>

once - 事件只执行一次

事件只执行一次