微信小程序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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
Vue.js动态组件解析
Sep 09 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
Jun 04 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
详解Node 定时器
Feb 26 Javascript
boostrap模态框二次弹出清空原有内容的方法
Aug 10 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
PHP中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
PHP自定义函数格式化json数据示例
2016/09/14 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
用dtree实现树形菜单 dtree使用说明
2011/10/17 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
让python在hadoop上跑起来
2016/01/27 Python
浅析Git版本控制器使用
2017/12/10 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
Python实现抢购IPhone手机
2018/02/07 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
对python中return与yield的区别详解
2020/03/12 Python
Django websocket原理及功能实现代码
2020/11/14 Python
animation和transition的区别
2020/10/12 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
什么是唯一索引
2015/07/05 面试题
商场拾金不昧表扬信
2014/01/13 职场文书
同学会主持词
2014/03/18 职场文书
诚信考试倡议书
2014/04/15 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang
分享3个非常实用的 Python 模块
2022/03/03 Python