阻止小程序冒泡的三种方法

最新推荐文章于 2025-06-14 21:18:41 发布

瑆箫

最新推荐文章于 2025-06-14 21:18:41 发布

阅读量1.9w

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mo3408/article/details/83104225

微信开发和微信小程序同时被 2 个专栏收录

62 篇文章 ¥299.90 ¥399.90

订阅专栏

超级会员免费看

微信开发

37 篇文章 ¥239.90 ¥399.90

订阅专栏

超级会员免费看

本文详细介绍了在小程序开发中，如何有效阻止事件冒泡的三种方法：使用`stopPropagation`、设置`catchTap`和修改事件处理结构。通过实例代码展示每种方法的实现，帮助开发者更好地理解和应用这些技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.直接用方法 ：catchtouchmove="preventD"

<view class="selector-bj {{isTapSelector ? '' : 'is-focus-selector' }}"
wx:if="{{selectorBj}}" bindtap='tapSeleBj' catchtouchmove="preventD"></view>

//防止点击穿透 背景层
preventD:function(){

},

2. 使用 catch 不用bind
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view
3.在方法最后加上return false。