微信小程序--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 本文将结合具体的实战经验,主要介绍微信小程序的基础知识.开 ...
随机推荐
- entity framework delete table Error 11007:
udate model from database 数据库表删除时,会出现“Error 11007:”的异常,此时在.edmx文件中找到此表的实体发现还存在,删除它就没有这个错误 了.
- 29. ClustrixDB 分布式架构/并发控制
介绍 ClustrixDB使用多版本并发控制(MVCC)和2阶段锁(2PL)的组合来支持混合的读写工作负载.在我们的系统中,读取器享受无锁快照隔离,而写入器使用2PL来管理冲突.并发控制的组合意味着读 ...
- JavaScript 数组2—关联数组
㈠什么是关联数组 可以自定义下标名称的数组 ㈡为什么 索引数组中的数字下标没有明确的意义 ㈢何时 只希望每个元素都有专门的名称时 ㈣如何:2步 1)创建空数组 2)向空数组中添加新元素,并自定义下标名 ...
- OCWA提高组模拟赛一 Solution
Problem A RecMin 给出一个$n \times m$的矩阵,其中$1 \leq n,m \leq 3\ times 10^3$ 给出整数$a,b$,求出在矩阵中所有$a\ times b ...
- TensorFlow使用记录 (二): 理解tf.nn.conv2d方法
方法定义 tf.nn.conv2d(input, filter, strides, padding, use_cudnn_on_gpu=True, data_format="NHWC&quo ...
- js下拉框选择图片
二种方式:下拉框里面选项有图片与没有图片 1.用下拉框写 下拉框的option没法添加图片如果下拉框里面不需要图片可以用这种方式. <!DOCTYPE html> <html> ...
- Android_(游戏)打飞机01:前言
(游戏)打飞机01:前言 传送门 (游戏)打飞机02:游戏背景滚动 传送门 (游戏)打飞机03:控制玩家飞机 传送门 (游戏)打飞机04:绘画敌机.添加子弹 传送门 (游戏)打飞机05:处理子弹, ...
- sqli-labs(4)
sqli-libs(4)通关过程 0x01爱之初体验 首先我们进行注入试探 发现我们的单引号 回显事正常的 双引号回显反而是错误的 查看源码我们发现 多了一个给id赋值的语句 我们在php上面执行一下 ...
- 14.多线程设计模式 - Master-Worker模式
多线程设计模式 - Master-Worker模式 并发设计模式属于设计优化的一部分,它对于一些常用的多线程结构的总结和抽象.与串行相比并行程序结构通常较为复杂,因此合理的使用并行模式在多线程并发中更 ...
- SSM三大框架整合配置详解
首先,导入框架所需要的全部jar包(此处省略...........) 第一步:先从mybatis框架开始 我们只需要在mybatis的核心配置文件sqlConfigXml里写上这么一段话,代表的是给p ...