微信小程序--catchtap&bindtap
转自: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的更多相关文章
- 微信小程序组件——bindtap和catchtap的区别
了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事 ...
- 微信小程序的bindtap事件
在微信小程序中,要想获取元素的属性值,需要用到 bindtap事件,如果想要正确获取到属性值,对属性的命名还有一定要求 如下是正确的方式data-money-Num="9.93": ...
- 【微信小程序】--bindtap参数传递,配合wx.previewImage实现多张缩略图预览
本文为原创随笔,纯属个人理解.如有错误,欢迎指出. 如需转载请注明出处 在微信小程序中预览图片分为 a.预览本地相册中的图片. b.预览某个wxml中的多张图片. 分析:实质其实是一样的.都是给wx. ...
- 微信小程序:bindtap等事件传参
事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, data ...
- 微信小程序之bindtap事件绑定传参
wxml代码: <view class='fen'> <text bindtap='prev' data-page="{{pageDang}}">上一页&l ...
- 微信小程序:bindtap方法传参
1.wxml <view bindtap="pay_again" data-name="{{orderList.jid}}" data-fee=" ...
- 微信小程序探究
前段时间比较流行的微信小程序,因为一直没有所谓内测码也没具体关注.拖到现在正好借组内分享的时机来仔细了解一下微信小程序.了解一个新的事物无外乎从是什么(本质),怎么用(具体用法),为什么用(优缺点)来 ...
- 微信小程序学习
官方网站 https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 项目结构介绍 -- MINA框架 https://mp.weixin.qq.com/ ...
- 微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)
最近集中开发了两款微信小程序,分别是好奇心日历(每天一条辞典+一个小投票)和好奇心日报(轻量版),直接上图: Paste_Image.png 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...
随机推荐
- MYSQL之数据库初识、安装详解、sql语句基本操作
目录 MYSQL之数据库初识及安装详解 1.什么是数据库? 1.什么是数据?(data) 2.什么是数据库?(databases,简称DB) 2.为什要用数据库? 3.什么是数据库管理系统?(Data ...
- MySQL8.0.18通用版本安装
环境说明: 系统版本:CentOS release 6.8 (Final) MySQL版本:mysql-8.0.18 内存:63G 空间:8T 1 配置本地yum仓库 这个只需要拷贝一个镜像,然后挂载 ...
- JS中生成随机数
1.Math 对象方法: Math.ceil(); //向上取整. Math.floor(); //向下取整. Math.round(); //四舍五入. Math.random(); //0.0 ~ ...
- CF603E Pastoral Oddities 优先队列+结论+LCT维护生成树
首先,一个神奇的结论:一个合法的方案存在的条件是每一个联通块的节点数都是偶数个的. 这个可以用数学归纳法简单证一证. 证出这个后,我们只需动态加入每一个边,并查看一下有哪些边能够被删除(删掉后联通块依 ...
- CF 352 D 罗宾汉发钱 模拟题+贪心
D. Robin Hood time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- Max Sum Plus Plus(最大m字段和,优化)
Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Description Now I t ...
- Oracle根据列中的特殊符号进行分组
原数据: 目标结果: 根据-符号将数据进行分组,思路是根据NAME列值进行复制,若为‘-’则赋值1,其他为0,这样就可以根据累加实现分组, 具体实现代码: /* Formatted on 2019/9 ...
- R_Studio(学生成绩)对数据进行属性构造处理
对“Gary.csv”中数据进行进行属性构造处理,增加“总成绩”属性 Gary.csv setwd('D:\\data') list.files() #数据读取 dat=read.csv(file=& ...
- 如何运行一个分布式的Maven项目
本人也属于一个新手小白,之前在公司运行的项目也都不涉及到maven...但是前两天运行一个maven项目的时候发现,第一次接触这个还是蛮让我措手不及的.在这里整理下自己当时走的弯路,或者遇到的一些问题 ...
- JSP之Bean
<jsp:useBean id=" " class" "/>创建JavaBean对象,并把创建的对象保存到域对象 比如:<jsp:useBea ...