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

本文详细介绍了在小程序开发中,如何有效阻止事件冒泡的三种方法:使用`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。

 

### 如何在微信小程序阻止事件冒泡 在微信小程序中,传统的 `event.stopPropagation()` 和 `event.preventDefault()` 方法并不适用,因为这些方法主要用于 Vue 或 React 等框架,在微信小程序中的实现方式有所不同。 为了有效阻止事件冒泡,推荐使用 `catchtap` 替代 `bindtap` 来绑定点击事件。具体来说: - **`bindtap`**: 此属性允许事件正常触发并继续向上传播给父级元素。 - **`catchtap`**: 使用此属性可立即停止事件传播至任何上级节点[^2]。 #### 实战代码演练示例:阻止事件冒泡 下面是一个简单的例子来展示如何通过改变事件处理器的方式防止不必要的事件冒泡现象发生: ```html <!-- WXML 文件 --> <view class="parent" bindtap="handleParentTap"> Parent View <view class="child" catchtap="handleChildTap"> <!-- 注意这里用了 catchtap 而不是 bindtap --> Child View </view> </view> ``` ```javascript // JS 文件 Page({ handleParentTap(e) { console.log('Parent tapped'); }, handleChildTap(e) { console.log('Child tapped, but parent will not receive this event.'); } }) ``` 在这个案例里,当用户点击子视图(`.child`)时只会触发对应的处理函数而不会影响到其父容器(`.parent`)上的监听器;反之如果改回成 `bindtap`, 则两个级别的回调都会被执行. 值得注意的是,并非所有的内置组件都支持冒泡行为,默认情况下像 `<button>` 这样的控件产生的交互动作是非冒泡类型的,因此无需特别考虑它们之间的相互干扰问题[^4]. 另外需要注意一些特殊情况下的配置项设置不当也可能引起意外的冒泡效果,比如页面下拉刷新功能未被禁用的情况下即使调用了相应的 API 接口也无法完全抑制默认操作的发生[^5].
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瑆箫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值