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

简介: 阻止小程序事件冒泡的三种方法

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。

在小程序可以查看跟多前端面试题

微信小程序搜:红旗头像制作

相关文章
|
1月前
|
存储 小程序 JavaScript
【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)
【微信小程序】-- 自定义组件 -- 数据、方法和属性(三十三)
|
1月前
|
小程序 前端开发 Android开发
解决小程序中textarea ios端样式不兼容的两种方法
解决小程序中textarea ios端样式不兼容的两种方法
123 0
|
1月前
|
存储 缓存 小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
|
1月前
|
小程序
微信小程序中识别HTML标签的方法
微信小程序中识别HTML标签的方法
|
1月前
|
存储 缓存 JSON
微信小程序使用本地存储方法
微信小程序使用本地存储方法
201 1
|
1月前
|
存储 JSON 小程序
html在线预览CAD(手机小程序浏览DWG)二次开发图层表的方法
本文档介绍了DWG数据库中图层的存储结构及MxCAD库对图层的操作。图层信息存储于图层层表McDbLayerTable()中,每个记录对应一个图层,包含颜色、线型等属性,且有一个不可删除的默认"0"层。主要操作包括:通过MxCpp.getCurrentMxCAD()获取图层表,使用addLayer()添加图层,遍历图层,以及删除图层。此外,还展示了如何修改图层的关闭、冻结、锁定状态及颜色。提供了在线示例以演示这些功能。
html在线预览CAD(手机小程序浏览DWG)二次开发图层表的方法
|
23天前
|
小程序
微信小程序上传图片的三种方法
微信小程序上传图片的三种方法
|
1月前
|
数据采集 小程序 数据挖掘
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
Matplotlib库模板学习,2024年最新微信小程序页面跳转方法总结
|
1月前
|
小程序 安全 Android开发
微信小程序中识别HTML标签的方法
微信小程序中识别HTML标签的方法
73 1
|
1月前
|
小程序 数据库
【微信小程序7】云开发中实时聊天系统的实现方法
【微信小程序7】云开发中实时聊天系统的实现方法
48 0