vue阻止子元素触发父元素的事件,事件冒泡处理
vue阻止子元素触发父元素的事件1、起因2、实现代码3、部分特殊情况的处理方式1、起因需求要求图片列表可选,并且点击该区域弹出图片详情,但是复选框又有自己的事件,所以需要点击复选框的时候不触发父元素的事件。2、实现代码原代码<div class="tim" id="tim" v-for="(fileName, index) in nowPhotoArr" :key="fileNa...
·
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>
更多推荐
已为社区贡献10条内容
所有评论(0)