如何解决微信小程序中视图控件与bindtap之间的问题-创新互联

这篇文章将为大家详细讲解有关如何解决微信小程序中视图控件与bindtap之间的问题，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

为容县等地区用户提供了全套网页设计制作服务，及容县网站建设行业解决方案。主营业务为成都网站制作、成都网站建设、容县网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

在微信小程序中 最常用的控件 可以用bindtap（冒泡反应） 如的形式绑定ItemOnclick事件并传递一个dataset，其包含一个名为mType的元素 值为123。

在某一次设计中

有如下结构：

ItemOnclick事件在点击在图片上时不会触发 需要点击在图片之外及外层view范围之内的地方 才会触发

若将bindtap写在标签内 则反过来 点击图片会触发 但点击在图片之外及外层view范围之内的地方不会触发

由此我做出判断

点击事件不会向父级或子级控件传递。

（然而这与冒泡反应的定义是不一致的）

但是最近又碰到下面这种情况：

需要实现 点击图片 显示菜单列表 点击每个菜单项 触发MenuItemOnclick事件并传递对应的参数

然后当在标签外的地方点击一下 就触发HideMenuList事件隐藏菜单

而实际产生的效果是 当点击图片时 菜单列表一闪便消失 有时直接没显示
后通过打印log发现是当点击图片触发了ShowMenuList事件后 HideMenuList事件也被触发了（且总在ShowMenuList事件之后）

即点击事件由传递到了外层的 因而触发了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事件绑定可以阻止冒泡事件向上冒泡：

//视图层
   //在组件中绑定bindtap事件 函数handleTap1
 outer view
  //在组件中绑定catchtap事件 函数handleTap2
  middle view
   //在组件中绑定bindtap事件 函数handleTap3
   inner 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之间的问题”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享文章：如何解决微信小程序中视图控件与bindtap之间的问题-创新互联
标题链接：http://6mz.cn/article/pgcii.html