转自:https://www.cnblogs.com/heron-yu/p/7244481.html

转自:http://blog.csdn.net/xiaochun365/article/details/69948578

bindtap元素绑定事件,父节点绑定事件会冒泡

catchtap不会冒泡,仅在当前元素触发

//wxml

<view class="view1" bindtap="view1">
<view class="view2" bindtap="view2">
<view class="view3" catchtap="view3"></view>
</view>
</view>

//js

Page({
data: {
}, view1: function () {
console.log("---view1 bindtap click")
}, view2: function () {
console.log("--view2 bindtap click")
}, view3: function () {
console.log("-view3 catchtap click ")
}
})

//点击view3

-view3 catchtap click 

//点击view2

--view2 bindtap click
---view1 bindtap click

//点击view1

---view1 catchtap click 

点击view1,因为是bindtap他会向父节点传递,因为他本身没有父节点所以只打印的view1 bindtap click

微信小程序--catchtap&bindtap的更多相关文章

  1. 微信小程序组件——bindtap和catchtap的区别

    了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事 ...

  2. 微信小程序的bindtap事件

    在微信小程序中,要想获取元素的属性值,需要用到 bindtap事件,如果想要正确获取到属性值,对属性的命名还有一定要求 如下是正确的方式data-money-Num="9.93": ...

  3. 【微信小程序】--bindtap参数传递,配合wx.previewImage实现多张缩略图预览

    本文为原创随笔,纯属个人理解.如有错误,欢迎指出. 如需转载请注明出处 在微信小程序中预览图片分为 a.预览本地相册中的图片. b.预览某个wxml中的多张图片. 分析:实质其实是一样的.都是给wx. ...

  4. 微信小程序:bindtap等事件传参

    事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, data ...

  5. 微信小程序之bindtap事件绑定传参

    wxml代码: <view class='fen'> <text bindtap='prev' data-page="{{pageDang}}">上一页&l ...

  6. 微信小程序:bindtap方法传参

    1.wxml <view bindtap="pay_again" data-name="{{orderList.jid}}" data-fee=" ...

  7. 微信小程序探究

    前段时间比较流行的微信小程序,因为一直没有所谓内测码也没具体关注.拖到现在正好借组内分享的时机来仔细了解一下微信小程序.了解一个新的事物无外乎从是什么(本质),怎么用(具体用法),为什么用(优缺点)来 ...

  8. 微信小程序学习

    官方网站 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 项目结构介绍 -- MINA框架 https://mp.weixin.qq.com/ ...

  9. 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)

    最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...

随机推荐

  1. 【leetcode】1266. Minimum Time Visiting All Points

    题目如下: On a plane there are n points with integer coordinates points[i] = [xi, yi]. Your task is to f ...

  2. Python 操作 MySQL 数据库Ⅳ

    执行事务 事务机制可以确保数据一致性. 事务应该具有4个属性:原子性.一致性.隔离性.持久性.这四个属性通常称为ACID特性. 原子性(atomicity).一个事务是一个不可分割的工作单位,事务中包 ...

  3. SpringBoot项目中,AOP的使用

    Springboot中自带依赖 1.创建一个SellerAuthorizeAspect类,打上标签@Aspect和@Component @Aspect @Component @Slf4j public ...

  4. ant design 的表格默认选中

    在使用 ant design 的表格时候使用默认选中项, 需要配置的 Table 的 rowSelection const rowSelection = { type: 'checkbox', get ...

  5. [JZO6401]:Time(贪心+树状数组)

    题目描述 小$A$现在有一个长度为$n$的序列$\{x_i\}$,但是小$A$认为这个序列不够优美. 小$A$认为一个序列是优美的,当且仅当存在$k\in [1,n]$,满足:$$x_1\leqsla ...

  6. What’s up with the Graph Laplacian

    What's up with the Graph Laplacian? 来源 作者:Jeremy Kun blog: Math ∩ Programming 在数学上图和与图关联的某些矩阵的代数性质有很 ...

  7. C++入门经典-例3.25-使用循环输出闰年

    1:代码如下: // 3.25.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> usin ...

  8. 如何把java项目打包成war包

    用Eclipse手动打包 右击工程名 选择Export… 选择Web → WAR file 点击Browse,选择导出路径 然后war包就被导出来啦~是不是很简单呢 利用Maven的package命令 ...

  9. UVA 122 -- Trees on the level (二叉树 BFS)

     Trees on the level UVA - 122  解题思路: 首先要解决读数据问题,根据题意,当输入为“()”时,结束该组数据读入,当没有字符串时,整个输入结束.因此可以专门编写一个rea ...

  10. cinder-----常用命令

    云硬盘的创建查询 #创建卷类型 cinder type-create rbd #rbd是云硬盘类型名称,可自行定义 #查询卷类型 cinder type-list #卷类型扩展规格 cinder ty ...