『VUE』10. 事件修饰符（详细图文注释）

news2025/11/4 10:50:09

什么是事件修饰符?

vue

在 Vue.js 中，事件修饰符是一种用于处理 DOM 事件的特殊指令，可以在事件处理程序中提供额外的控制或功能。以下是一些常用的 Vue.js 事件修饰符：

.stop：阻止事件继续传播，即调用 event.stopPropagation()。

<button @click.stop="handleClick">Click Me</button>

.prevent：阻止事件的默认行为，即调用 event.preventDefault()。

<form @submit.prevent="handleSubmit">Submit Form</form>

.capture：使用事件捕获模式，即在捕获阶段处理事件。

<div @click.capture="handleClick">Click Me</div>

.self：只有当事件是从元素自身触发时才会触发处理函数，而不是冒泡过程中的其他元素。

<div @click.self="handleClick">Click Me</div>

.once：事件只会触发一次，之后移除事件监听器。

<button @click.once="handleClick">Click Me Once</button>

.passive：指示浏览器不应该阻止事件的默认行为，可以提高页面滚动性能。

<div @touchstart.passive="handleTouchStart">Touch Me</div>

js

event.preventDefault() :调用 event.preventDefault() 方法会告诉浏览器取消事件的默认行为。比如，在点击链接时，如果你调用了 event.preventDefault()，那么链接不会导航到新的页面
event.stopPropagation()：
这个方法用于停止事件在 DOM 树中的传播，阻止事件的进一步传播或冒泡。如果一个父元素和子元素都绑定了相同类型的事件，并且事件在子元素上触发后还要继续冒泡到父元素，你可以在子元素上调用 event.stopPropagation() 来阻止这种冒泡行为。
event.stopImmediatePropagation()：
这个方法与 event.stopPropagation() 类似，但是它不仅停止事件传播，还阻止任何后续事件处理程序被调用。
return false：
在某些情况下，可以在事件处理函数中使用 return false 来同时阻止默认行为和停止事件传播。例如，在 HTML 中使用 οnclick=“return false;” 可以达到这个效果。

不使用修饰符原生js实现禁用事件对象的默认事件

我们点击网页上的跳转按钮后会跳转到百度,也会控制台中打印"点击了",使用e.preventDefault()就可以禁用网页跳转.

EventDemo6.vue

<template>
  <h3>事件修饰符</h3>
  <a @click="eventStyle" href="www.baidu.com">跳转</a>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    eventStyle(e) {
      e.preventDefault(); //禁用控件本身默认的事件,比如说我们a标签的跳转到百度事件会被禁用
      console.log("点击了");
    },
  },
};
</script>

点击了这么多下还在原来的网页.
在这里插入图片描述

使用事件修饰符 .prevent

注释了// e.preventDefault(),但是通过@click.prevent="eventStyle"的方式设置了禁用默认事件.

EventDemo6.vue

<template>
  <h3>事件修饰符</h3>
  <a @click.prevent="eventStyle" href="www.baidu.com">跳转</a>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    eventStyle(e) {
      //   e.preventDefault(); //禁用控件本身默认的事件,比如说我们a标签的跳转到百度事件会被禁用
      console.log("点击了");
    },
  },
};
</script>

使用事件修饰符 .stop

不使用.stop,先触发了p然后因为p在div中,点击p触发之后还会触发div的事件,顺序是p-div的冒泡顺序

<template>
  <h3>事件修饰符</h3>
  <a @click.prevent="eventStyle" href="www.baidu.com">跳转</a>

  <div @click="clickDiv">
    <p @click="clickP">点我先触发p还是div呢?</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    eventStyle(e) {
      //   e.preventDefault(); //禁用控件本身默认的事件,比如说我们a标签的跳转到百度事件会被禁用
      console.log("点击了");
    },
    clickDiv() {
      console.log("点击了div");
    },
    clickP() {
      console.log("点击了p");
    },
  },
};
</script>

使用了.stop 禁用了冒泡,只触发了p不会触发父节点div的事件

<template>
  <h3>事件修饰符</h3>
  <a @click.prevent="eventStyle" href="www.baidu.com">跳转</a>

  <div @click="clickDiv">
    <p @click.stop="clickP">点我先触发p还是div呢?</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    eventStyle(e) {
      //   e.preventDefault(); //禁用控件本身默认的事件,比如说我们a标签的跳转到百度事件会被禁用
      console.log("点击了");
    },
    clickDiv() {
      console.log("点击了div");
    },
    clickP() {
      console.log("点击了p");
    },
  },
};
</script>

使用事件修饰符 .self

只有点击"div的内容"才会触发,也就是只有点击了div本身自己才能触发事件,不受到冒泡影响.哪怕p没有使用.stop也不会通过p触发div

<template>
  <h3>事件修饰符</h3>
  <a @click.prevent="eventStyle" href="www.baidu.com">跳转</a>

  <div @click.self="clickDiv">
    div的内容
    <p @click="clickP">点我先触发p还是div呢?</p>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    eventStyle(e) {
      //   e.preventDefault(); //禁用控件本身默认的事件,比如说我们a标签的跳转到百度事件会被禁用
      console.log("点击了");
    },
    clickDiv() {
      console.log("点击了div");
    },
    clickP() {
      console.log("点击了p");
    },
  },
};
</script>