vue中阻止事件冒泡

vue阻止事件冒泡

问题描述：
使用的element-ui的dialog对话框，在对话框的父组件还有点击事件，点击dialog对话框时也会相应外部父组件的点击事件。

<el-dialogtitle="提示":visible.sync="dialogVisible"width="30%"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span>
</el-dialog>

第一步修改

<el-dialogtitle="提示":visible.sync="dialogVisible"width="30%"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click.stop="dialogVisible = false">取 消</el-button><el-button type="primary" @click.stop="dialogVisible = false">确 定</el-button></span>
</el-dialog>

这一步能够达到，取消和确认按钮不响应父组件事件，但是这两个区域外的仍然会响应

第二步修改

<el-dialogtitle="提示":visible.sync="dialogVisible"width="30%"@click.stop.native="dialogVisible = false"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click.stop="dialogVisible = false">取 消</el-button><el-button type="primary" @click.stop="dialogVisible = false">确 定</el-button></span>
</el-dialog>

这一步能实现点击dialog的其他区域关闭dialog并且不会响应父组件事件。开始我直接写的stop没有加native，这样仍然会响应父组件的事件。

native的作用：
简单理解就是把子组件转换为普通HTML标签，不加native原生的事件无法触发。

vue中阻止事件冒泡相关推荐

处理 react_【学习教程】React 中阻止事件冒泡的问题
来源 | https://www.cnblogs.com/Wayou/p/react_event_issue.html 在正式开始前,先来看看 js 中事件的触发与事件处理器的执行. js 中事件的监 ...
react取消捕获_React中阻止事件冒泡的问题详析
前言最近在研究react.redux等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容,下面话不多说了,来一起看看详细的介绍吧在正式开始 ...
微信小程序中阻止事件冒泡
使用场景如上图,这是一个活动的列表页面,当用户点击整个列表时,跳转到活动详情页面,当用户点击"去报名"按钮时,跳转到报名页面.但是当我们用"bindtap"事 ...
jquery中阻止事件冒泡的方法
2019独角兽企业重金招聘Python工程师标准>>> 根据<jquery基础教程> 第一种方法:判断事件的"直接"目标是否是自身,如果不是自身,不予 ...
微信小程序阻止事件冒泡
在vue中阻止事件冒泡的方法使用的event.stopPropagation(); 但微信小程序中事件传递的event却没有stopPropagation()这个方法解决方案:将绑定事件的bindt ...
Js阻止事件冒泡和阻止默认事件
js中阻止事件冒泡,阻止默认事件的方法,理解stopPropagation(),preventDefault(),return false的区别 1.event.stopPropagation()方法 ...
VUE中如何阻止事件冒泡
当父子元素中都有点击事件的时候,为了让触发子元素中的事件时,不去触发父元素中的事件,可以在子元素事件中添加stop来阻止事件冒泡. 如图,在button的点击事件中加上stop,触发addStatus ...
快速了解4种阻止事件冒泡的方法（原生js阻止，vue中使用修饰符阻止）
阻止事件冒泡的方法前端结构 <div id="app"><div class="father-box" @click="click ...
Js、Vue阻止事件冒泡行为
目录 Js阻止事件冒泡行为 Vue阻止事件冒泡行为以下是Js阻止事件冒泡行为 event.stopPropagation() <!DOCTYPE html> <html lang= ...

vue中阻止事件冒泡

vue阻止事件冒泡

vue中阻止事件冒泡相关推荐

最新文章

热门文章