微信小程序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 相关文章推荐
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
Jun 27 Javascript
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
JS实现的最简Table选项卡效果
Oct 14 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
AJAX学习笔记
May 18 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通过header实现文本文件下载的代码
2010/08/08 PHP
Zend的AutoLoad机制介绍
2012/09/27 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
JavaScript 读取元素的CSS信息的代码
2010/02/07 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
王纯业的Python学习笔记 下载
2007/02/10 Python
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python绘制七段数码管实例代码
2017/12/20 Python
Python理解递归的方法总结
2019/01/28 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
python安装及变量名介绍详解
2020/12/12 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
车祸赔偿收入证明
2014/01/09 职场文书
高中军训感言1000字
2014/03/01 职场文书
大三学习计划书范文
2014/05/02 职场文书
科技之星事迹材料
2014/06/02 职场文书
博士论文答辩开场白
2015/06/01 职场文书
白银帝国观后感
2015/06/17 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript