转自: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. python 的ConfigParser模块

    Python 之ConfigParser模块 一.ConfigParser简介 ConfigParser 是用来读取配置文件的包.配置文件的格式如下:中括号“[ ]”内包含的为section.sect ...

  2. re.compile 函数

    re.compile 函数 compile 函数用于编译正则表达式,生成一个正则表达式( Pattern )对象,供 match() 和 search() 这两个函数使用. 语法格式为: re.com ...

  3. 【CF521C】Pluses everywhere(贡献)

    题意:有一个长为n的数字字符串,要求其中插入k个加号,求所有合法表达式的和之和 0<=k<n<=1e5 思路:参考官方题解,讲的很好很清楚 字符串下标从0开始 考虑第i位d[i]的贡 ...

  4. python模块turtle简单用法

    ##初始化turtle:t = turtle.Turtle() 或者 t = turtle.Pen()##查询turtle状态#位置t.position() #箭头朝向,箭头朝向按照顺时针或者逆时针偏 ...

  5. JS框架_(JQuery.js)带阴影贴纸标签按钮

    百度云盘 传送门 密码:azo6 纯CSS带阴影贴纸标签按钮效果: <!doctype html> <html> <head> <meta charset=& ...

  6. 各种框架实现了经典的 todo 应用

    http://todomvc.com/ 版权声明:本文为博主原创文章,未经博主允许不得转载.

  7. Java并发编程的艺术笔记(九)——FutureTask详解

    FutureTask是一种可以取消的异步的计算任务.它的计算是通过Callable实现的,多用于耗时的计算. 一.FutureTask的三种状态 二.get()和cancel()执行示意 三.使用 一 ...

  8. Div内容居中

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 读取文件信息,并通过sscanf从中获取所需数据

    #include <stdio.h> #include <stdlib.h> #include <string.h> int file_length(char* f ...

  10. note:memcache 調試遇到的一些問題

    1. gdb調試時提示:<value optimized out> ,原因是memcache的編譯选项做了优化,修改configure中CFLAGS中的-O3为-O0,可以解决gdb调试过 ...