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

2023-08-24 21:58:05 204

在微信小程序中最常用的控件可以用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
outerview
//在组件中绑定catchtap事件函数handleTap2
middleview
//在组件中绑定bindtap事件函数handleTap3
innerview

//逻辑层
Page({
handleTap1:function(event){
//点击handleTap1输出outerviewbindtap
console.log("outerviewbindtap")
},
handleTap2:function(event){
//点击handleTap2输出middleviewcatchtap
console.log("middleviewcatchtap")
},
handleTap3:function(event){
//点击handleTap3输出innerviewbindtapmiddleviewcatchtap
console.log("innerviewbindtap")
},

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

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

热门推荐

随机推荐