微信小程序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实现的页内搜索代码
May 23 Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
Oct 24 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 syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
HTML DOM的nodeType值介绍
2011/03/31 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
node.js中的require使用详解
2014/12/15 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
浅析javascript的return语句
2015/12/15 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
ES6新增数据结构WeakSet的用法详解
2017/08/07 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
Element el-button 按钮组件的使用详解
2021/02/01 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
使用TensorFlow实现SVM
2018/09/06 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
意大利自行车商店:Cingolani Bike Shop
2019/09/03 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
化工机械应届生求职信
2013/11/04 职场文书
销售工作人员的自我评价分享
2013/11/10 职场文书
运动会通讯稿150字
2014/02/15 职场文书
医学生临床实习自我评价
2014/03/07 职场文书