微信小程序bindtap事件与冒泡阻止详解


Posted in Javascript onAugust 08, 2019

bindtap就是点击事件

在.wxml文件绑定:

<text id='textId' data-userxxx='100' bindtap='tapMessage'>cilck here</text>

在一个组件的属性上添加bindtap并赋予一个值(一个函数名)

当点击该组件时, 会触发相应的函数执行

在后台.js文件中定义tapMessage函数:

//index.js
Page({
 data: {
  mo: 'Hello World!!',
  userid : '1234',
 }, 
  // 定义函数
 tapMessage: function(event) {
  console.log(event.target.id);    // 可获得
  console.log(event.target.name);   // 无法获得, 通过target只能直接获取id
  console.log(event.target.dataset); // 要获得其它属性, 需要从dataset(数据集)中获取
  console.log(event.target.dataset.userxxx); // userxxx为自定义的属性名, 但命名方式为:data-userxxx
  
  // 这里还原使用userXxx
  console.log(event.target.dataset.userXxx);
 }
})

event封装的是该事件的信息, 如上通过它可得到一些数据

注意一点:

<!-- data-userXxx,这个大写的X要改为-x -->
<text id='textId' data-user-xxx='100' bindtap='tapMessage'>cilck here</text>

自定义数据(data-)中的大写改为 短横线+其小写

取数据时, 去掉data和那些短横线并还原大写 (data-user-xxx --> userXxx)

事件冒泡就是指嵌套事件发生

如果多层标签嵌套, 里层事件发生后, 其外层会相应发生, 如:

<view bindtap='handout'>
  outer
  <view bindtap='handmiddle'>
   middle
   <view bindtap='handinner'>inner</view>
  </view>
 </view>
handout: function () {
 console.log("out");
},
handmiddle: function () {
 console.log("middle");
},
handinner: function () {
 console.log("inner");
}

点击inner三个事件都执行, 点击middlek执行handmiddle和handout, 点击out只执行handout

阻止事件冒泡行为: 将bindtap改为catchtap就行了, 只会触发自身的点击事件

<view bindtap='handout'>
  outer
  <view catchtap='handmiddle'>
   middle
   <view bindtap='handinner'>inner</view>
  </view>
 </view>

需要理解是, 它阻断自身的冒泡行为

如上点击inner, 执行的是handinner和handmiddle两个函数

不管是不是自身触发的点击行为, 传到我这里, 我就将它阻断(不再向上传递)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
js实现符合国情的日期插件详解
Jan 19 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
Element Popover 弹出框的使用示例
Jul 26 Javascript
js实现全选和全不选
Jul 28 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 #Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 #Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 #Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 #Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
Aug 08 #Javascript
javascript实现blob加密视频源地址的方法
Aug 08 #Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 #Javascript
You might like
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
2014/06/13 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
javascript的this关键字详解
2019/05/20 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python实现数组插入新元素的方法
2015/05/22 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
深入理解Python 多线程
2020/06/16 Python
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
体育老师的教学自我评价分享
2013/11/19 职场文书
升职自荐书范文
2013/11/28 职场文书
文明倡议书范文
2014/04/15 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
汽车转让协议书
2015/01/29 职场文书
《山中访友》教学反思
2016/02/24 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
千万级用户系统SQL调优实战分享
2022/03/03 MySQL