微信小程序视图控件与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 相关文章推荐
Node.js中对通用模块的封装方法
Jun 06 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
Bootstrap基础学习
Jun 16 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
angular5 子组件监听父组件传入值的变化方法
Sep 30 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
jquery实现垂直手风琴导航栏
Feb 18 jQuery
JavaScript实现留言板案例
Mar 17 Javascript
js制作提示框插件
Dec 24 Javascript
js实现碰撞检测
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
新版PHP极大的增强功能和性能
2006/10/09 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
那些精彩的JavaScript代码片段
2017/01/12 Javascript
jQuery使用bind动态绑定事件无效的处理方法
2018/12/11 jQuery
Vue中实现权限控制的方法示例
2019/06/07 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
python网络编程之读取网站根目录实例
2014/09/30 Python
Python编程之event对象的用法实例分析
2017/03/23 Python
python访问抓取网页常用命令总结
2017/04/11 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
使用SVG实现提示框功能的示例代码
2020/06/05 HTML / CSS
Java编程面试题
2016/04/04 面试题
DTD的含义以及作用
2014/01/26 面试题
房地产销售经理岗位职责
2014/01/01 职场文书
优秀教师获奖感言
2014/01/31 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
市场调查策划方案
2014/06/10 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
angular4实现带搜索的下拉框
2022/03/25 Javascript
教你部署vue项目到docker
2022/04/05 Vue.js