vue判断点击当前元素
点击按钮,出现弹窗;然后点击遮罩层,当前弹窗消失。一开始都会在遮罩层上绑定点击事件,但是这样的话,点击了form表单,当前弹窗也会消失。所以,需要判断你是点击了遮罩层还是form表单1.在遮罩层上绑定点击事件@click=“showfun2($event)”<div class="topfrom" v-show="msg" @click="showfun2($event)">...
·
点击按钮,出现弹窗;然后点击遮罩层,当前弹窗消失。
一开始都会在遮罩层上绑定点击事件,但是这样的话,点击了form表单,当前弹窗也会消失。
所以,需要判断你是点击了遮罩层还是form表单
1.在遮罩层上绑定点击事件 @click=“showfun2($event)”
<div class="topfrom" v-show="msg" @click="showfun2($event)">
<!--子组件-->
<fromdemo btndata="点击咨询"></fromdemo>
</div>
2.判断是否点击了当前元素 e.currentTarget === e.target
showfun2(e) {
if (e.currentTarget === e.target) {
this.msg = false
}
},
以上就完成当前事件点击元素的判断。
接下来是分别对e.currentTarget、e.target打印
showfun2(e) {
console.log(e.currentTarget)
console.log(e.target)
},
第一次点击 遮罩层
第二次点击 form表单
发现 e.currentTarget 打印的始终是,绑定点击事件的元素。
更多推荐
已为社区贡献1条内容
所有评论(0)