vue阻止子元素触发父元素的事件，事件冒泡处理

java_xxxx

已于 2022-03-01 20:07:00 修改

阅读量5.8k

点赞数 1

文章标签： vue.js javascript 前端冒泡事件 elementui

于 2022-02-24 17:44:08 首次发布

原文链接：https://blog.csdn.net/weixin_44849078/article/details/89406583

版权

本文介绍如何在Vue中避免子元素（如el-checkbox）点击事件导致父元素（图片列表）事件触发。提供了三种解决方案，包括使用v-on:click.stop、直接在标签上设置@click.stop.prevent，以及针对特定组件的嵌套层级处理。

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

1、起因

在这里插入图片描述
需求要求图片列表可选，并且点击该区域弹出图片详情，但是复选框又有自己的事件，所以需要点击复选框的时候不触发父元素的事件。

2、实现代码

原代码

<div class="tim" id="tim" v-for="(fileName, index) in nowPhotoArr" :key="fileName" @click.stop="openPhotoDetails(fileName, index)">
    <el-checkbox :label="fileName"></el-checkbox>
  	<img class="img" :src="playPath + fileName">
  	<p class="name">{{fileName}}</p>
</div>

在需要阻止事件冒泡的元素上加上 v-on:click.stop=“stopMaopao”

<el-checkbox :label="fileName" v-on:click.stop="stopMaopao"></el-checkbox>

不设置事件也可以

<el-checkbox :label="fileName" @click.stop=""></el-checkbox>

3、部分特殊情况的处理方式

但是对于有些组件，绑定在他们上面是无效的，需要在外卖再套一层，将事件绑定到父元素上，比如elementui的checkbox。

      <el-checkbox-group v-model="checkedList" @change="handleCheckedphotoListChange">
        <div class="tim" id="tim" v-for="(fileName, index) in nowPhotoArr" :key="fileName" @click.stop="openPhotoDetails(fileName, index)">
          <div class="checkbox"  v-on:click.stop="">
            <el-checkbox :label="fileName"></el-checkbox>
          </div>
          <img class="img" :src="playPath + fileName">
          <p class="name">{{fileName}}</p>
        </div>
      </el-checkbox-group>

#######################################################
原文链接：https://blog.csdn.net/weixin_44849078/article/details/89406583
######################################################

上面博客已经写的很好了，但是我的还是不管用，我的需求是
点击el-checkbox前的框，勾选。然后点击checkbox后的文字，打开新链接。但是当我点击文字打开链接的时候，总是会改变checkbox的勾选状态
代码如下，在el-link外面添加一层div，并且添加@click.stop.prevent去阻止冒泡即可

<el-form-item label="自定义检查项1">
   <span>
      <el-checkbox @change="checkChange(item)" v-model="item.value" v-for="item in checkItem.checkItems">
        <div @click.stop.prevent>
          <el-link :underline="false" @click="openLink(item)">{{item.label}}</el-link>
        </div>
      </el-checkbox>
    </span>
    <el-button class="button-new-tag" size="small"  @click="openAddCheck">+ 检查项</el-button>
</el-form-item>