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

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.youkuaiyun.com/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>