微信小程序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 asp.net 获取当前超链接中的文本
Apr 14 Javascript
jQuery html()等方法介绍
Nov 18 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
js日期相关函数总结分享
Oct 15 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
jquery datatable服务端分页
Aug 31 Javascript
Vue组件开发初探
Feb 14 Javascript
JS实现点击拉拽轮播图pc端移动端适配
Sep 05 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
js使用cookie记录用户名的方法
2015/11/26 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
layui将table转化表单显示的方法(即table.render转为表单展示)
2019/09/24 Javascript
Python中for循环控制语句用法实例
2015/06/02 Python
Python爬取当当、京东、亚马逊图书信息代码实例
2017/12/09 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
环保倡议书怎么写
2014/05/16 职场文书
英语课外活动总结
2014/08/27 职场文书
神农溪导游词
2015/02/11 职场文书
实习指导老师意见
2015/06/04 职场文书
病假证明模板
2015/06/19 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS