转自: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. C# => 写法

    public static IWebHostBuilder CreateWebHostBuilder(string[] args) => WebHost.CreateDefaultBuilder ...

  2. 线程Thread、线程池ThreadPool

    Thread调用含参方法,参数必须是object类.ThreadPool调用的方法,无论是否含参,方法必须有object类参数(可不用,但得有) [线程] using System; using Sy ...

  3. cgi 检索Cookie信息

    Cookie信息检索页非常简单,Cookie信息存储在CGI的环境变量HTTP_COOKIE中,存储格式如下: key1=value1;key2=value2;key3=value3.... 以下是一 ...

  4. Eclipse中注释乱码解决办法

    问题描述:将别人的Java工程导入自己的工作空间之后,有时候会出现注释乱码问题. 这是由于IDE对汉字的编码方式不同造成的.比如,原来的开发人员使用的是UTF-8编码方式,而现在开发人员使用的IDE使 ...

  5. Codeforces Round #578 (Div. 2) Solution

    Problem A Hotelier 直接模拟即可~~ 复杂度是$O(10 \times n)$ # include<bits/stdc++.h> using namespace std; ...

  6. python实现的一个中文文本摘要程序

    文本摘要方法有很多,主要分为抽取式和生成式,应用比较多的是抽取式,也比较简单,就是从文本中抽取重要的句子或段落.本方法主要是利用句子中的关键词的距离,主要思想和参考来自阮一峰的网络日志http://w ...

  7. POJ3233 [C - Matrix Power Series] 矩阵乘法

    解题思路 题目里要求\(\sum_{i=1}^kA^i\),我们不妨再加上一个单位矩阵,求\(\sum_{i=0}^kA^i\).然后我们发现这个式子可以写成这样的形式:\(A(A(A...)+E)+ ...

  8. input选择框默认样式修改

    input选择框是无法直接修改样式,我们只能间接来改变它样式. 原理:用图片来代替原来的input选择框,原来的input选择框定位到图片上方并让它opacity为0,鼠标点击时用js来改变图片,这样 ...

  9. php 将几个变量合为数组,变量名和值对应

    <?php $firstname = "Bill"; $lastname = "Gates"; $age = "60"; $resul ...

  10. 深入理解Vuex 模块化(module)

    todo https://www.jb51.net/article/124618.htm