# vue 超链接/el-link 阻止事件冒泡

最新推荐文章于 2025-05-19 14:01:30 发布

PAcaption

最新推荐文章于 2025-05-19 14:01:30 发布

阅读量5.3k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文详细讲解了Vue中常用的事件修饰符，包括stop阻止默认行为、once仅触发一次、self限定事件源、prevent阻止默认事件、passive禁用浏览器检查、capture捕获阶段监听，以及.native用于原生事件。通过实例演示了它们在实际开发中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

### 写法一
<div @click.stop>
<el-link :href="`/v1/prescription/look_event/`">
    <span v-text="item2.name"></span>
</el-link>
</div>

### 写法二

<el-link @click.stop.native :href="`/v1/prescription/look_event/`"> <span v-text="item2.name"></span> </el-link>

事件修饰符

除了.stop之外，Vue v-on还提供了其它事件修饰符

.once

只响应事件一次，例如@click.once="fun4"，表示仅第一次点击才会执行fun4

这里， @event等同于v-on:event，vue事件绑定的两种格式。

.self

仅当事件由元素自身（比如不是子元素）触发时，才响应事件。例如，上述实验1的基础上，修改@click="fun3"为@click.self="fun3",那么，点击div4所在div时，div3所在div不会回调fun3,即不会响应点击事件

.prevent

某些元素(如带href属性的超链接元素a)拥有自身的默认事件（事件冒泡结束之后开始执行，并且不受.stop影响）,如果不希望元素响应默认事件，可以给元素事件增加.prevent。常见的屏蔽右键默认菜单

.passive

每次事件产生，浏览器都会去查询一下是否调用了preventDefault阻止该次事件的默认动作,为事件设置.passive修饰符就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。

.capture

表示在“事件捕获阶段”监听事件，即在事件捕获阶段回调事件处理函数。例如，在上述实验1的基础上，修改@click="fun3"为@click.capture="fun3",点击div4时，将输出如下

.native

用于在某个组件的根元素上监听一个原生事件。