这篇文章将为大家详细讲解有关如何解决微信小程序中视图控件与bindtap之间的问题，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
在微信小程序中 最常用的<view>控件 可以用bindtap（冒泡反应） 如<view bindtap="ItemOnclick" data-mType="123">的形式绑定ItemOnclick事件并传递一个dataset，其包含一个名为mType的元素 值为123。
在某一次设计中
有如下结构：
<view class="func-m" bindtap="ItemOnclick" data-mType="123">
<image src="{{ROOT_PATH}}/images/icon1.png" />
</view>ItemOnclick事件在点击在图片上时不会触发 需要点击在图片之外及外层view范围之内的地方 才会触发
若将bindtap写在<image>标签内 则反过来 点击图片会触发 但点击在图片之外及外层view范围之内的地方不会触发
由此我做出判断
点击事件不会向父级或子级控件传递。
（然而这与冒泡反应的定义是不一致的）
但是最近又碰到下面这种情况：
<view bindtap="HideMenuList"><!--此为最外层view-->
<image src="{{ROOT_PATH}}/images/icon1.png" bindtap="ShowMenuList" />
<view class="menu-list">
<view class="menu-item" data-mType="CP" bindtap="MenuItemOnclick">
</view>
<view class="menu-item" data-mType="HW" bindtap="MenuItemOnclick">
</view>
</view>
</view>需要实现 点击图片 显示菜单列表 点击每个菜单项 触发MenuItemOnclick事件并传递对应的参数
然后当在<view class="menu-list">标签外的地方点击一下 就触发HideMenuList事件隐藏菜单
而实际产生的效果是 当点击图片时 菜单列表一闪便消失 有时直接没显示
后通过打印log发现是当点击图片触发了ShowMenuList事件后 HideMenuList事件也被触发了（且总在ShowMenuList事件之后）
即点击事件由<image>传递到了外层的<view> 因而触发了HideMenuList事件
这样的话那之前的判断就是错误的
目前还没找到这两种情况之间的关键差异,第二种情况的解决方案是 当显示菜单时 同时创造一个透明遮罩层覆盖除菜单列表外的区域，点击到这个透明遮罩层后触发HideMenuList事件并销毁或隐藏遮罩层
PS:第二种情况的方式 以前在html及Android环境下都有用过 是没有这个问题的，可能微信小程序这方面的底层机制和html及Android不一样，还待深究。
微信小程序bindtap与catchtap的区别详解
参考官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
bindtap和catchtap都是当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡：
//视图层
<view id="outer" bindtap="handleTap1"> //在组件中绑定bindtap事件 函数handleTap1
outer view
<view id="middle" catchtap="handleTap2"> //在组件中绑定catchtap事件 函数handleTap2
middle view
<view id="inner" bindtap="handleTap3"> //在组件中绑定bindtap事件 函数handleTap3
inner view
</view>
</view>
</view>//逻辑层
Page({
handleTap1:function(event){
//点击handleTap1输出 outer view bindtap
console.log("outer view bindtap")
},
handleTap2: function (event) {
//点击handleTap2输出 middle view catchtap
console.log("middle view catchtap")
},
handleTap3: function (event) {
//点击handleTap3输出 inner view bindtap middle view catchtap
console.log("inner view bindtap")
},关于“如何解决微信小程序中视图控件与bindtap之间的问题”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
