微信小程序视图控件与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 相关文章推荐
jQuery timers计时器简单应用说明
Oct 28 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
JS随机排序数组实现方法分析
Oct 11 Javascript
javascript将非数值转换为数值
Sep 13 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
小程序实现列表倒计时功能
Jan 29 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
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
JS 有名函数表达式全面解析
2010/03/19 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
Python MD5加密实例详解
2017/08/02 Python
使用numpy和PIL进行简单的图像处理方法
2018/07/02 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
python实现栅栏加解密 支持密钥加密
2019/03/20 Python
python多线程同步之文件读写控制
2021/02/25 Python
python unichr函数知识点总结
2020/12/16 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
意大利专业化妆品品牌:KIKO MILANO
2017/02/01 全球购物
美国环保婴儿用品公司:The Honest Company
2017/11/23 全球购物
PHP经典面试题
2016/09/03 面试题
中药专业毕业自荐书范文
2014/02/08 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
市场开发计划书
2014/05/07 职场文书
金砖之国观后感
2015/06/11 职场文书
MySQL 数据类型详情
2021/11/11 MySQL