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


Posted in Javascript onApril 08, 2019

在微信小程序中 最常用的<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的区别详解

参考官方文档 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") 
  },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
深入浅出ES6之let和const命令
Aug 25 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
vue2里面ref的具体使用方法
Oct 27 Javascript
详细分析单线程JS执行问题
Nov 22 Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 Javascript
jQuery实现本地存储
Dec 22 jQuery
微信小程序实现bindtap等事件传参
Apr 08 #Javascript
详解vue中axios请求的封装
Apr 08 #Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 #Javascript
vue+element+Java实现批量删除功能
Apr 08 #Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 #Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 #Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 #Javascript
You might like
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
Python实现的桶排序算法示例
2017/11/29 Python
python scatter散点图用循环分类法加图例
2019/03/19 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
用Python徒手撸一个股票回测框架搭建【推荐】
2019/08/05 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
python利用faker库批量生成测试数据
2020/10/15 Python
TensorFlow低版本代码自动升级为1.0版本
2021/02/20 Python
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
财务经理的岗位职责
2013/12/17 职场文书
法学专业毕业生自荐信范文
2013/12/18 职场文书
火车的故事教学反思
2014/02/11 职场文书
质量承诺书格式
2014/05/20 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
财务个人年度总结范文
2015/02/26 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
教学工作总结范文5篇
2019/08/19 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript
浅析Python OpenCV三种滤镜效果
2022/04/11 Python