微信小程序视图控件与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 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
jquery 插件学习(五)
Aug 06 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
Ajax 加载数据 练习代码
Jan 05 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 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 xfocus防注入资料
2008/04/27 PHP
php 移除数组重复元素的一点说明
2008/11/27 PHP
php 获取本地IP代码
2013/06/23 PHP
PHP中mysqli_affected_rows作用行数返回值分析
2014/12/26 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
bootstrap PrintThis打印插件使用详解
2017/02/20 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python使用super()出现错误解决办法
2017/08/14 Python
Python网络编程 Python套接字编程
2017/09/13 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
flask session组件的使用示例
2018/12/25 Python
Python代码打开本地.mp4格式文件的方法
2019/01/03 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
公司离职证明范本
2014/10/17 职场文书
文明单位申报材料
2014/12/23 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android
Java对文件的读写操作方法
2022/04/29 Java/Android
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript