点击事件如果防止冒泡

发布于 7 年前作者 iwen6626 次浏览最后编辑 7 年前来自 ask

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

10 回复
lilong
lilong1 楼6 年前

b2,跟center-v1是什么?

jpan
jpan2 楼6 年前

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

zenggang
zenggang3 楼6 年前

都试过了都不能获取区别

xiuying46
xiuying464 楼6 年前

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

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

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

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

guiyinghou
guiyinghou5 楼6 年前

我加了 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>
yfan
yfan6 楼6 年前

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

nalai
nalai7 楼6 年前

用 catchtap 就行了 可以防止冒泡

xiongmin
xiongmin8 楼6 年前

e.target,target代表源控件

bli
bli9 楼6 年前

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

jing49
jing4910 楼5 年前

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