微信小程序视图控件与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 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 Javascript
js实现弹窗猜数字游戏
Nov 26 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
sphinx增量索引的一个问题
2011/06/14 PHP
Thinkphp中Create方法深入探究
2014/06/16 PHP
getimagesize获取图片尺寸实例
2014/11/15 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
JS与C#编码解码
2013/12/03 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
Python 基础教程之str和repr的详解
2017/08/20 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
python 获取sqlite3数据库的表名和表字段名的实例
2019/07/17 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
单位在职证明范本
2014/01/09 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
公司总经理岗位职责
2014/03/15 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
信用卡工作证明模板
2014/09/14 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
校园安全学习心得体会
2016/01/18 职场文书
《我是什么》教学反思
2016/02/16 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
vue/cli 配置动态代理无需重启服务的方法
2022/05/20 Vue.js
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL