小程序--e.target和e.currentTarget区别
事件捕获与事件冒泡
事件捕获是从外到内,事件冒泡是从内到外。
注意:不管是不是冒泡事件,都不会改变事件传递的参数值,都还是在dataset中获取(******)
target:指事件源组件对象 currentTarget:当前组件对象
分两种情况是属于冒泡事件还是非冒泡事件
第一种情况:属于冒泡行为bind
wxml页面代码:
<view id="outter" bind:tap="tap1">
outer view
<view id="middle" bind:tap="tap2">
middle view
<view id="inner" bind:tap="tap3">
inner view
</view>
</view>
</view>
js代码:
tap1: function (e) {
console.log(1, e)
},
tap2: function (e) {
console.log(2, e)
},
tap3: function (e) {
console.log(3, e)
}
运行结果:
点击子元素inner,但由于是冒泡行为父类元素middle和outter都触发,从结果可以看出:
父类middle和outter,target的id都是等于inner(子元素的id);
middle的currentTarget的id是middle,outter的currentTarget的id是outter;
第二种情况:非冒泡行为 catch
wxml代码: (和第一种不一样的点在于都改成catch:tap)
<view id="outter" catch:tap="tap1">
outer view
<view id="middle" catch:tap="tap2">
middle view
<view id="inner" catch:tap="tap3">
inner view
</view>
</view>
</view>
js代码:
tap1: function (e) {
console.log(1, e)
},
tap2: function (e) {
console.log(2, e)
},
tap3: function (e) {
console.log(3, e)
}
结果:
因为在middle和inner都设置了非冒泡行为,所以都只是运行到自己的不会往上走,这个结果是分别点击了middle和inner,以上这些可以得出:
当事件没有冒泡行为时,target和currentTarget都指向事件触发的对象本身。
需要注意的:还有一种情况是如果inner是冒泡,middle是非冒泡,点击inner的结果
结果还是和第一种一样
总结:
1.当全是冒泡行为时:
target:事件源组件对象(事件的冒泡源头)
currentTarget:当前组件对象(就是当前所处的对象)
2.当没有冒泡行为时:
target和cueerntTarget是一样的,就是当前所处的对象
小程序--e.target和e.currentTarget区别的更多相关文章
- 微信小程序——e.target与e.currentTarget的区别
在小程序的点击事件中,我们经常使用这两个属性来传参,看起来效果一样,查了官方文档如下: target:事件源组件对象 currentTarget:当前组件对象 什么意思?我刚开始就有点不懂,那就直接上 ...
- 彻底弄懂小程序e.target与e.currentTarget
一.小程序中关于事件对象 e 的属性中有两个特别重要的属性:target与currentTarget属性:对于这两个属性,官方文档上的解释是: target:事件源组件对象 currentTarg ...
- 【小程序】获取到的e.target与e.currentTarget区别
[小程序]获取到的e.target与e.currentTarget区别:https://blog.csdn.net/qq_33744228/article/details/80310294 使用e.t ...
- 微信小程序的target和currentTarget的区别
https://www.jb51.net/article/160886.htm 在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentTarget属性,接下 ...
- 微信小程序中target与currentTarget
target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,tar ...
- 微信小程序 事件绑定 bind和catch 区别
转自:https://blog.csdn.net/xiaoqiang_0719/article/details/79729592 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别 ...
- 微信小程序组件——bindtap和catchtap的区别
了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事 ...
- vue中的绑定class和微信小程序中的绑定class的区别
微信小程序 小程序里面的class与style绑定,遵循HTML特性绑定,有关于HTML绑定.在进行class与style绑定时,可以直接绑定,也可以带上逻辑与,或者三元运算进行条件控制 JS dat ...
- event.target和event.currentTarget区别
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素
随机推荐
- #C++初学记录(贪心算法#二分查找)
D - Aggressive cows 农夫 John 建造了一座很长的畜栏,它包括N (2 <= N <= 100,000)个隔间,这些小隔间依次编号为x1,...,xN (0 < ...
- R绘制韦恩图 | Venn图
解决方案有好几种: 网页版,无脑绘图,就是麻烦,没有写代码方便 极简版,gplots::venn 文艺版,venneuler,不好安装rJava,参见Y叔 酷炫版,VennDiagram 特别注意: ...
- MATLAB中 H(b > g) = 2*pi - H(b > g); 作何解
H(b > g) = 2*pi - H(b > g); %b > g 会得到一个逻辑矩阵,如b=[7,5,6] ;g=[1,2,8],那么b>g会得到[1,1,0]: b< ...
- 场景图(Scene Graph)
场景(Scene) · GitBook https://docs.cocos.com/cocos2d-x/manual/zh/basic_concepts/scene.html 场景图(Scene G ...
- Windows任务栏遮挡
通过MSTSC远程桌面连接,远程的电脑桌面任务栏被本地的任务栏遮住了! 首先在本地的任务栏右键,选择任务管理器,选择正在运行的windows资源管理器进程,右键选择重新启动(R) OK,重启的Wind ...
- PHP 浮点型运算相关问题
php 浮点数计算比较及取整不准确.举例: $a = 0.2+0.7; $b = 0.9; var_dump($a == $b); //输出的结果为bool(false) PHP 官方手册说明:显然简 ...
- flutter 数据存储 SP和sqlite
添加插件: shared_preferences: ^0.4.2 path_provider: ^1.2.0 sqflite: ^0.12.0 import 'dart:async'; import ...
- Django ORM的继承关系
ORM中通常将对象引用映射到外键,但是对于继承,关系数据库中没有自然有效的方法来对应.从数据存储的角度来看,在映射继承关系时,可以采用几种方式(参考JPA中的InheritanceType.定义): ...
- Locust-参数化批量注册(还没试,目测试可以的)
前言 实现场景:所有并发虚拟用户共享同一份测试数据,并且保证虚拟用户使用的数据不重复.例如,模拟10用户并发注册账号,总共有100个手机号,要求注册账号不重复,注册完毕后结束测试 准备数据 虚拟用户 ...
- python 求交集、并集、差集
需要用到set类型 交集,两种方法 retA = [i for i in listA if i in listB] retB = setA.intersection(setB) 并集 retC = s ...