点击事件如果防止冒泡
发布于 6 年前 作者 iwen 6479 次浏览 来自 问答

如图所示 我做了一个弹窗 我目标是点击黑色背景执行一个方法关闭这个弹窗 但是点击上面的框内容的时候也会执行这个方法请问怎么能过滤掉这个事件啊？

10 回复

b2,跟center-v1是什么?

是的 center-v 是包在里面的 最外层的是整体弹窗 用isshow控制显示隐藏

都试过了都不能获取区别

最外层控件简称为A控件:

target代表触发事件的源控件,如果阴影部分是只属于A控件的,那么点击阴影部分,这时源控件就是A控件,当然能从event.target.dataset中获取到源控件(即A控件)的自定义属性(因为你定义了);

点其他地方肯定会点到A控件的子控件(即其他控件)里面去,那源控件肯定就不是A控件,那event.target.dataset中肯定获取不到数据(因为其他控件你没有设置自定义属性).

这个问题,只要根据event.target.dataset中能否获取A控件自定义属性,就可以判断触发事件的源控件是否是A控件,就可以做出不同处理

我加了 data-id=  发现 点击日历的时候 也会有这个 点击选取时间那些都会带过去 那个  data-id=‘window’ event.currentTarget 判断不出来

<view class="b2 "  data-id='window' hidden="{{isshow}}" bindtap="windowclick">
   <!-- <view class="b2 " hidden="false"> -->
   <view class="center-v1">
     <view class="w-80">
       <view class="time-title text-c font-s1">
         选取时间
       </view>

最外层的控件是包含全屏吗?center-v1是弹窗吗?

用 catchtap 就行了 可以防止冒泡

e.target,target代表源控件

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。譬如把内层的bindtap改为catchtap

添加一个id或自定义属性作为标志,点击时判断一下e.target中有没有这个标志

回到顶部