微信小程序bindtap事件与冒泡阻止详解

 更新时间:2019年08月08日 11:28:54   作者:智昕  
这篇文章主要介绍了小程序bindtap事件与冒泡阻止详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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两个函数

不管是不是自身触发的点击行为, 传到我这里, 我就将它阻断(不再向上传递)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • uniapp页面跳转的五种方式总结

    uniapp页面跳转的五种方式总结

    这篇文章主要给大家介绍了关于uniapp页面跳转的五种方式,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-03-03
  • JS中产生标识符方式的演变

    JS中产生标识符方式的演变

    本文记录下JS中产生标识符方式的演变,从ES5到ES6,ES5及其之前是一种方式,只包含两种声明(var/function),ES6则增加了一些产生标识符的关键字,如 let、const、class。
    2015-06-06
  • ECMAScript6块级作用域及新变量声明(let)

    ECMAScript6块级作用域及新变量声明(let)

    这篇文章主要介绍了ECMAScript6块级作用域及新变量声明(let) 的相关资料,需要的朋友可以参考下
    2015-06-06
  • 归纳下js面向对象的几种常见写法总结

    归纳下js面向对象的几种常见写法总结

    下面小编就为大家带来一篇归纳下js面向对象的几种常见写法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 在JavaScript中验证URL的新方法(2023版)

    在JavaScript中验证URL的新方法(2023版)

    在JavaScript领域,URL 验证方面有了新消息!多年来,人们一直在讨论JavaScript没有一种简便的方法来验证 URL,现在有了一种新方法URL.canParse(),需要的朋友可以参考下
    2023-09-09
  • js实现class样式的修改、添加及删除的方法

    js实现class样式的修改、添加及删除的方法

    这篇文章主要介绍了js实现class样式的修改、添加及删除的方法,主要通过修改标签的className来实现这一功能,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • JavaScript使用readAsDataUrl方法预览图片

    JavaScript使用readAsDataUrl方法预览图片

    这篇文章主要为大家详细介绍了JavaScript使用readAsDataUrl方法预览图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • prettify 代码高亮着色器google出品

    prettify 代码高亮着色器google出品

    prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,最值得亮点的地方是不需要指明代码的语言类型,它会自动进行判断。
    2010-12-12
  • JavaScript 装逼指南(js另类写法)

    JavaScript 装逼指南(js另类写法)

    如何写JavaScript才能逼格更高呢?怎样才能、让别人一眼看出你不简单呢?是否很期待别人在看完你的代码之后感叹一句原来还可以这样写呢?下面列出一些在JavaScript时的装逼技巧,也可说是非常实用的写法
    2020-05-05
  • javascript正则表达式定义(语法)总结

    javascript正则表达式定义(语法)总结

    这篇文章主要介绍了javascript正则表达式定义,对于JavaScript正则表达式的语法进行了总结分析,需要的朋友可以参考下
    2016-01-01

最新评论