微信小程序点击事件冒泡

简介: 微信小程序点击事件冒泡

微信小程序事件冒泡:

<view  bindtap='bindtap2'>
     <view  bindtap='bindtap1'>
            事件冒泡
     </view>
</view>
bindtap1:function(event){
  console.log(“111111”)
},
bindtap2:function(event){
  console.log(“2222”)
}

如上代码:如果点击了bindtap1事件会执行:bindtap1和bindtap2,也就是会打印出“111111”和“2222”,这个就是冒泡,如何解决呢?

小程序的事件主要有:

touchtab  点击事件

touchstart 开始滑动

touchmove 滑动中

touchend  滑动结束

touchcancel 滑动中断 一般来电或其他弹出框使得滑动中断

小程序中的wxml中绑定事件有两种:以touchtab为例   ,在wxml中必须有bind/catch不然无法实现上述事件

bind的不会阻止事件冒泡(元素最里层到最外层函数执行),catch会阻止冒泡,只是冒泡到当前层结束  。

所以想要阻止事件冒泡那么可以八bindtap事件改成catchtap就ok 了。


相关文章
|
小程序 API
微信小程序如何点击按钮,复制文本到粘贴板
微信小程序如何点击按钮,复制文本到粘贴板
微信小程序如何点击按钮,复制文本到粘贴板
|
1月前
|
小程序
微信小程序实现点击复制(wx.setClipboardData)
微信小程序实现点击复制(wx.setClipboardData)
15 0
|
6月前
|
小程序
微信小程序阻止事件冒泡
微信小程序阻止事件冒泡
234 0
|
2月前
|
前端开发
微信拖拽盒子movable-view点击事件失效问题
微信拖拽盒子movable-view点击事件失效问题
|
5月前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
|
7月前
|
小程序 前端开发 开发者
微信小程序web-view上覆盖原生组件,解决cover-view点击事件无法触发问题
微信小程序web-view上覆盖原生组件,解决cover-view点击事件无法触发问题
166 0
|
8月前
|
小程序 JavaScript
微信小程序 - 点击事件传递参数(简单详细)
微信小程序 - 点击事件传递参数(简单详细)
488 0
|
8月前
|
小程序 JavaScript 前端开发
微信小程序开发系列 (三) :微信小程序如何响应用户点击事件和微信平台 API 的使用方法介绍
微信小程序开发系列 (三) :微信小程序如何响应用户点击事件和微信平台 API 的使用方法介绍
151 0
|
9月前
|
小程序 开发者
微信小程序系列——点击图片放大预览
微信小程序系列——点击图片放大预览
|
9月前
|
小程序 JavaScript
微信小程序-小程序事件冒泡和事件捕获
!> 小程序当中的时间捕获与时间冒泡与原生JS的是一样的
182 0

热门文章

最新文章