微信小程序的target和currentTarget的区别
https://www.jb51.net/article/160886.htm
在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentTarget属性,接下来说说这二者的区别。
首先上代码:
wxml部分:
|
1
2
3
4
|
<view id='tar-father' bindtap='click'> 父组件 <view id='tar-children'>子组件</view> </view> |
wxss部分:
|
1
2
3
4
5
6
7
8
|
#tar-father{ width: 300rpx; height: 300rpx; background-color: skyblue;}#tar-children{ background-color: pink;} |
效果图

js部分:
|
1
2
3
4
|
click: function (event) { console.log(event.target) console.log(event.currentTarget)} |
当点击图中粉色子组件区域时的输出结果:

event.target 为其子组件,也就是触发该事件的源头组件
event.currentTarget 为事件所绑定的组件
当点击图中蓝色父组件区域时的输出结果:

event.target 为父组件,因为触发的源头也就是父组件本身
event.currentTarget 始终为事件所绑定的组件
总结:target对应的是触发事件的源头组件,这个组件有可能是子组件,有可能是父组件,主要是看执行动作的区域。而currentTarget始终对应事件所绑定的组件。
微信小程序的target和currentTarget的区别的更多相关文章
- 微信小程序中target与currentTarget
target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,tar ...
- vue中的绑定class和微信小程序中的绑定class的区别
微信小程序 小程序里面的class与style绑定,遵循HTML特性绑定,有关于HTML绑定.在进行class与style绑定时,可以直接绑定,也可以带上逻辑与,或者三元运算进行条件控制 JS dat ...
- 微信小程序组件——bindtap和catchtap的区别
了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事 ...
- 微信小程序——e.target与e.currentTarget的区别
在小程序的点击事件中,我们经常使用这两个属性来传参,看起来效果一样,查了官方文档如下: target:事件源组件对象 currentTarget:当前组件对象 什么意思?我刚开始就有点不懂,那就直接上 ...
- 微信小程序 事件绑定 bind和catch 区别
转自:https://blog.csdn.net/xiaoqiang_0719/article/details/79729592 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别 ...
- 微信小程序中concat 和push的区别
push和concat二者功能很相像,但有两点区别. 先看如下例子: var arr = []; arr.push(1); arr.push(2); arr.push([3, 4]) arr.push ...
- 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践
1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...
- 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程
一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...
- 微信小程序中的target和currentTarget区别
最近在学习微信小程序相关知识,其中提到了两个属性target和currentTarget,其中target是指向触发事件的元素(常见于事件委托中),而currentTarget是指向捕获事件的元素(即 ...
随机推荐
- MySQL 进阶3 排序查询
#进阶3 排序查询 格式: select 查询列名 from 表 [where 筛选条件] order by 排序列名 [asc / desc] 排序查询/嵌套排序查询/函数查询/[按别名进行 排序] ...
- #Python绘制 文本进度条,带刷新、时间暂缓的
#Python绘制 文本进度条,带刷新.时间暂缓的 #文本进度条 import time as T st=T.perf_counter() print('-'*6,'执行开始','-'*6) maxx ...
- 大数据之路week05--day01(JDBC 初识之实现一个系统 实现用户选择增删改查 未优化版本)
要求,实现用户选择增删改查. 给出mysql文件,朋友们可以自己运行导入到自己的数据库中: /* Navicat MySQL Data Transfer Source Server : mysql S ...
- mysql基础篇--库的管理
库的创建 create database [if not exists] 库名; 库的修改 alter database 库名 character set 字符集; #更改库的字符集 库的删除 dro ...
- [Google Guava] 11-事件总线
原文链接 译文连接 译者:沈义扬 传统上,Java的进程内事件分发都是通过发布者和订阅者之间的显式注册实现的.设计EventBus就是为了取代这种显示注册方式,使组件间有了更好的解耦.EventBus ...
- [Google Guava] 7-原生类型
原文链接 译文链接 译者:沈义扬,校对:丁一 概述 Java的原生类型就是指基本类型:byte.short.int.long.float.double.char和boolean. 在从Guava查找原 ...
- 【51nod 1340】地铁环线
题目 有一个地铁环线,环线中有N个站台,标号为0,1,2,...,N-1.这个环线是单行线,一共由N条有向边构成,即从0到1,1到2,..k到k+1,...,N-2到N-1,N-1到0各有一条边.定义 ...
- Python 2--序列
- Linux 不同方法查看进程消耗CPU IO 等
1.用top命令指定固定的PID top -p 10997 查询指定进程的PID ps -ef | grep zookeeper jim 10997 1959 0 12月14 pts/2 00:00: ...
- CF796C Bank Hacking 细节
思路十分简单,答案只有 3 种可能,但是有一些细节需要额外注意一下. code: #include <bits/stdc++.h> #define N 300002 #define set ...