微信小程序点击事件冒泡

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

微信小程序事件冒泡:

<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 了。


相关文章
|
4月前
|
小程序 数据库 C++
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
【微信小程序-原生开发】实用教程17 - 详情页触发列表页刷新,点击图片放大预览,转发给好友/群,分享到朋友圈
42 0
|
4月前
|
小程序 JavaScript
【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)
【微信小程序-原生开发】实用教程03-自定义底部导航(含自定义tabBar导航高亮需点击两次的解决方案)
131 0
|
小程序
微信小程序阻止事件冒泡
微信小程序阻止事件冒泡
281 0
|
6月前
|
小程序
微信小程序实现点击复制(wx.setClipboardData)
微信小程序实现点击复制(wx.setClipboardData)
147 0
|
6月前
|
前端开发
微信拖拽盒子movable-view点击事件失效问题
微信拖拽盒子movable-view点击事件失效问题
|
6月前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
微信小程序web-view嵌入uni-app H5页面,通过H5页面传参给小程序进行转发分享页面,并通过点击转发出来的卡片,定向打开对应H5路径
|
小程序 前端开发 开发者
微信小程序web-view上覆盖原生组件,解决cover-view点击事件无法触发问题
微信小程序web-view上覆盖原生组件,解决cover-view点击事件无法触发问题
256 0
|
小程序 JavaScript
微信小程序 - 点击事件传递参数(简单详细)
微信小程序 - 点击事件传递参数(简单详细)
762 0
|
小程序 开发者
微信小程序系列——点击图片放大预览
微信小程序系列——点击图片放大预览
|
小程序 JavaScript
微信小程序-小程序事件冒泡和事件捕获
!> 小程序当中的时间捕获与时间冒泡与原生JS的是一样的
220 0

热门文章

最新文章