微信小程序视图控件与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代码
May 09 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
JS实现图片放大缩小的方法
Feb 15 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
Webpack中css-loader和less-loader的使用教程
Apr 27 Javascript
Babel 入门教程学习笔记
Jun 13 Javascript
opencv 识别微信登录验证滑动块位置
Aug 07 Javascript
微信小程序实现上传多张图片、删除图片
Jul 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
详谈commonjs模块与es6模块的区别
2017/10/18 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
pycharm 使用心得(六)进行简单的数据库管理
2014/06/06 Python
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
python批量下载抖音视频
2019/06/17 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
简单了解python高阶函数map/reduce
2019/06/28 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
Python GUI库PyQt5图形和特效样式QSS介绍
2020/02/25 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
BAILEY 44官网:美国制造的女性服装
2019/07/01 全球购物
深圳-东方伟业笔试部分
2015/02/11 面试题
大学毕业的自我鉴定
2013/10/08 职场文书
优秀应届毕业生自荐信
2013/11/16 职场文书
项目经理任命书范本
2014/06/05 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
离婚上诉状范文
2015/05/23 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android