转自: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. cdh本地源安装-自用

    yum 安装cm 参考官网 主机名 /etc/hosts hostnamectl set-hostname foo-1.data.com hostnamectl set-hostname foo-2. ...

  2. cogs157. [USACO Nov07] 奶牛跨栏 x

    157. [USACO Nov07] 奶牛跨栏 ★★   输入文件:hurdles.in   输出文件:hurdles.out   简单对比时间限制:1 s   内存限制:128 MB 译 by Cm ...

  3. 【POJ1011】Sticks

    [题目概括] 现在有\(n\)个长度不超过\(50\)的木棍,请你把这些小木棍拼成若干根长度相同的木棍. 请你最小化拼成后的长度. [思路要点] 考虑枚举最后的长度,然后判断是否可以,这样就不需要最优 ...

  4. openwrt python27库的选择和库的大小

    < > micropython................................................. Micro Python < > microp ...

  5. 解决zbx的web界面zabbix服务器端运行中 显示为不(启动命令)

    zabbix装完,发现server和agent服务都起来了,端口监听了,但是web界面zabbix服务器端运行中为 不 解决: 打开浏览器,到zabbix的setup.php界面 一般输入 ip/za ...

  6. 并发量,tps,qps

    QPS/TPS/并发量/系统吞吐量的概念 2017年08月13日 17:24:47 阅读数:10682 我们在日常工作中经常会听到QPS/TPS这些名词,也会经常被别人问起说你的系统吞吐量有多大.这个 ...

  7. C++入门经典-例6.20-修改string字符串的单个字符

    1:使用+可以将两个string 字符串连接起来.同时,string还支持标准输入输出函数.代码如下: // 6.20.cpp : 定义控制台应用程序的入口点. // #include "s ...

  8. 记一次elastic-job使用

    当当的elastic-job定时任务 业务场景是定时从微信取accesstoken和jsticket,因为都只有7200秒的有效时间,所以设置了定时任务,定时将得到的数据存到redis缓存中 问题1: ...

  9. 解决Cannot change version of project facet Dynamic Web Module to 3.1

    Open web.xml from project structure http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version= ...

  10. 【python】windows更改jupyter notebook(ipython)的默认打开工作路径

    写在前面:本博客为本人原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法URL:ht ...