微信小程序视图控件与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 相关文章推荐
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
Seajs的学习笔记
Mar 04 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
Angular.js中下拉框实现渲染html的方法
Jun 18 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
微信小程序实现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基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
Laravel框架表单验证详解
2014/09/04 PHP
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
图片翻转效果具体实现代码
2014/01/09 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
微信小程序实现滑动删除效果
2017/05/19 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
深入理解vue Render函数
2017/07/19 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
Vue.js自定义事件的表单输入组件方法
2018/03/08 Javascript
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
python: line=f.readlines()消除line中\n的方法
2018/03/19 Python
python配置grpc环境
2019/01/01 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
详解python中递归函数
2019/04/16 Python
python文件操作seek()偏移量,读取指正到指定位置操作
2020/07/05 Python
详解python程序中的多任务
2020/09/16 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
高中学生干部学习的自我评价
2014/02/21 职场文书
IT工程师岗位职责
2014/07/04 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
教师节获奖感言
2015/07/31 职场文书
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL
Nginx配置使用详解
2022/07/07 Servers