微信小程序视图控件与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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
详解vue中使用express+fetch获取本地json文件
Oct 10 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 Javascript
React Native项目框架搭建的一些心得体会
May 28 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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
解决PHP超大文件下载,断点续传下载的方法详解
2013/06/06 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
PHP PDOStatement对象bindpram()、bindvalue()和bindcolumn之间的区别
2014/11/20 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
收藏Javascript中常用的55个经典技巧
2007/08/12 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
Puppeteer环境搭建的详细步骤
2018/09/21 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
python服务器端收发请求的实现代码
2014/09/29 Python
在Python的Django框架中调用方法和处理无效变量
2015/07/15 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python装饰器常见使用方法分析
2019/06/26 Python
python代码如何注释
2020/06/01 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
市场总经理岗位职责
2014/04/11 职场文书
2014年保管员工作总结
2014/11/18 职场文书
工程款催款函
2015/06/24 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
Java字符串逆序方法详情
2022/03/21 Java/Android
简单聊聊Golang中defer预计算参数
2022/03/25 Golang