当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序视图控件与bindtap之间的问题的解决

微信小程序视图控件与bindtap之间的问题的解决

2019年07月24日  | 移动技术网IT编程  | 我要评论

在微信小程序中 最常用的<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 style="background-color:#eee;" 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的区别详解

参考官方文档

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") 
  },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网