微信小程序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 相关文章推荐
JS实现的省份级联实例代码
Jun 24 Javascript
4种JavaScript实现简单tab选项卡切换的方法
Jan 06 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
AngularJS通过$http和服务器通信详解
Sep 21 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
webpack3之loader全解析
Oct 26 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 Javascript
JavaScript实现雪花飘落效果
Dec 27 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中uploaded_files函数使用方法详解
2011/03/09 PHP
php插入中文到sqlserver 2008里出现乱码的解决办法分享
2012/07/19 PHP
PHP 之Section与Cookie使用总结
2012/09/14 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
php数组编码转换示例详解
2014/03/11 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
JS实现探测网站链接的方法【测试可用】
2016/11/08 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
webpack 样式加载的实现原理
2018/06/12 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
工商管理应届生求职信
2013/10/07 职场文书
五年级学生评语
2014/04/22 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
Python访问Redis的详细操作
2021/06/26 Python
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS