微信小程序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阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
如何在Vue中抽离接口配置文件
Oct 31 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
如何使用JavaScript策略模式校验表单
Apr 29 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
Syphon 秘笈
2021/03/03 冲泡冲煮
php错误级别的设置方法
2013/06/17 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
教大家制作简单的php日历
2015/11/17 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
PHP应用跨时区功能的实现方法
2019/03/21 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
vue组件生命周期详解
2017/11/07 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
Python复制目录结构脚本代码分享
2015/03/06 Python
Python内建数据结构详解
2016/02/03 Python
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
python中remove函数的踩坑记录
2021/01/04 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
公司培训欢迎词
2014/01/10 职场文书
服务标语大全
2014/06/18 职场文书
雾霾停课通知
2015/04/24 职场文书
撤诉状格式范本
2015/05/19 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
Nginx进程管理和重载原理详解
2021/04/22 Servers
压缩Redis里的字符串大对象操作
2021/06/23 Redis