微信小程序视图控件与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 相关文章推荐
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
Oct 17 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
代码解析React中setState同步和异步问题
Jun 03 Javascript
微信小程序实现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 静态变量的初始化
2009/11/15 PHP
PHP从FLV文件获取视频预览图的方法
2015/03/12 PHP
详解PHP归并排序的实现
2016/10/18 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
基于vue.js路由参数的实例讲解——简单易懂
2017/09/07 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
2019/09/10 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
2020/07/17 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
Pandas分组与排序的实现
2019/07/23 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
Stylenanda中文站:韩国一线网络服装品牌
2016/12/22 全球购物
国际知名军事风格休闲装品牌:Alpha Industries(阿尔法工业)
2017/05/24 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
行政助理工作职责范本
2014/03/04 职场文书
大学生入党自荐书
2015/03/05 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
golang通过递归遍历生成树状结构的操作
2021/04/28 Golang
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
React列表栏及购物车组件使用详解
2021/06/28 Javascript
python turtle绘图命令及案例
2021/11/23 Python