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的区别的更多相关文章

  1. 微信小程序中target与currentTarget

    target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,tar ...

  2. vue中的绑定class和微信小程序中的绑定class的区别

    微信小程序 小程序里面的class与style绑定,遵循HTML特性绑定,有关于HTML绑定.在进行class与style绑定时,可以直接绑定,也可以带上逻辑与,或者三元运算进行条件控制 JS dat ...

  3. 微信小程序组件——bindtap和catchtap的区别

    了解知识点 DOM模型是一个树形结构,在DOM模型中,HTML元素是有层次的.当一个HTML元素上产生一个事件时,该事件会在DOM树中元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事 ...

  4. 微信小程序——e.target与e.currentTarget的区别

    在小程序的点击事件中,我们经常使用这两个属性来传参,看起来效果一样,查了官方文档如下: target:事件源组件对象 currentTarget:当前组件对象 什么意思?我刚开始就有点不懂,那就直接上 ...

  5. 微信小程序 事件绑定 bind和catch 区别

    转自:https://blog.csdn.net/xiaoqiang_0719/article/details/79729592 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别 ...

  6. 微信小程序中concat 和push的区别

    push和concat二者功能很相像,但有两点区别. 先看如下例子: var arr = []; arr.push(1); arr.push(2); arr.push([3, 4]) arr.push ...

  7. 腾讯技术分享:微信小程序音视频与WebRTC互通的技术思路和实践

    1.概述 本文来自腾讯视频云终端技术总监rexchang(常青)技术分享,内容分别介绍了微信小程序视音视频和WebRTC的技术特征.差异等,并针对两者的技术差异分享和总结了微信小程序视音视频和WebR ...

  8. 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程

    一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...

  9. 微信小程序中的target和currentTarget区别

    最近在学习微信小程序相关知识,其中提到了两个属性target和currentTarget,其中target是指向触发事件的元素(常见于事件委托中),而currentTarget是指向捕获事件的元素(即 ...

随机推荐

  1. 【转】关于 Goroutine Channel Select 的用法和理解

    原文:https://blog.csdn.net/jfkidear/article/details/88661693 ----------------------------------------- ...

  2. 0001SpringBoot整合Mybatis

    SpringBoot整合Mybatis主要分为以下几个步骤: 1.添加Mybatis的起步依赖(pom.xml) 2.添加数据库驱动坐标(pom.xml) 3.添加数据库连接信息(applicatio ...

  3. [唐胡璐]Selenium技巧- dataProvider实现数据驱动

    废话不多讲,直接进主题,怎么实现用Excel配置测试数据,用dataProvider来调用测试数据。 jxl目前来看只支持.xls格式的文件,所以我们采用Apache POI来实现对.xlsx的操作, ...

  4. [唐胡璐]Selenium技巧- Highlight页面元素

    大家都知道QTP的对象高亮显示功能特别强大, Selenium Webderiver也可以实现此功能。 高亮显示有时候对Debug还是相当有用的。 解决脚本: 调用脚本: 结果显示:

  5. 如何DIY个性PE

    前言:有时候在网络上能找到很不错的PE(无忧启动论坛),但是有时候PE的功能仍不能满足自己的需要(软件过旧,缺少某些功能),这时候就显得自己DIYPE的重要性 需要的工具: WIMTOOL(必备) 软 ...

  6. Java 实现简单的SQL动态组装工具类

    第一版 package com.zh.oukele.util; import java.util.HashMap; import java.util.Iterator; import java.uti ...

  7. Python服务器开发 -- 网络基础

    Python服务器开发 -- 网络基础   网络由下往上分为物理层.数据链路层.网络层.传输层.会话层.表示层和应用层.HTTP是高层协议,而TCP/IP是个协议集,包过许多的子协议.... 网络由下 ...

  8. 6、Spring Boot 2.x 集成 MyBatis

    1.6 Spring Boot 2.x 集成 MyBatis 简介 详细介绍如何在Spring Boot中整合MyBatis,并通过注解方式实现映射. 完整源码: 1.6.1 创建 spring-bo ...

  9. JS BOM基础 全局对象 window location history screen navigator

    全局变量声明的两种方式:1,window.变量名=值;2,var 变量名=值; 全局函数声明的两种方式:1,window.函数名=function(){}2,function 函数名=function ...

  10. 「ARC103D」Robot Arms「构造」

    题意 给定\(n\)个点,你需要找到一个合适的\(m\)和\(d_1,d_2,...,d_m\),使得从原点出发每次向四个方向的某一个走\(d_i\)个单位,最终到达\((x_t, y_t)\).输出 ...