微信小程序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模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
javascript history对象详解
Feb 09 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
React注册倒计时功能的实现
Sep 06 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 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
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
php实现在多维数组中查找特定value的方法
2015/07/29 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
php图片上传类 附调用方法
2016/05/15 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
js下用eval生成JSON对象
2010/09/17 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
python 控制语句
2011/11/03 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
python如何实现反向迭代
2018/03/20 Python
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
决心书范文
2014/03/11 职场文书
旅游安全协议书
2014/04/21 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
软件项目开发计划书
2014/05/01 职场文书
学校春季防火方案
2014/06/08 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
Python读取文件夹下的所有文件实例代码
2021/04/02 Python
Python一些基本的图像操作和处理总结
2021/06/23 Python
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS