简单了解微信小程序 e.target与e.currentTarget的不同

在小程序的点击事件中，我们经常使用这两个属性来传参，看起来效果一样，查了官方文档如下：

target：事件源组件对象

currentTarget：当前组件对象

什么意思？我刚开始就有点不懂，那就直接上代码：

<view id="outter" bindtap="tap1">
  outer view
  <view id="middle" bindtap="tap2">
   middle view
   <view id="inner" bindtap="tap3">
    inner view
   </view>
  </view>
</view>
 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；

总结：

target：事件源组件对象(事件冒泡源头)

currentTarget：当前组件对象(就是当前对象)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序单选radio及多选checkbox按钮用法示例

    本文实例讲述了微信小程序单选radio及多选checkbox按钮用法.分享给大家供大家参考,具体如下: 1.单选:radio 实例: js: Page({ data : { radioId:"", loves:[ {id:1, name:"跑步" ,checked : 'true'}, {id:2, name:"篮球" }, {id:3, name:"足球" }, ] }, updataRadio:function(e){ v

  • 详解微信小程序获取当前时间及日期的方法

    详解微信小程序获取当前时间及日期的方法

    获取当前时间 首先,在要获取时间的.js文件中加载util.js文件 然后在onload方法中,调用util.js中的formatTime方法获取当前时间 //获取当前时间 // 调用函数时,传入new Date()参数,返回值是日期和时间 var TIME = util.formatTime(new Date()); this.setData({ time: TIME, }); 这样就获取到了当前时间,但是我们发现在util.js中并没有获取当前日期的方法. 没事,别慌! 这个时候我们去看下u

  • 如何在微信小程序里面退出小程序的方法

    如何在微信小程序里面退出小程序的方法

    公司要求用小程序重构已有的微信公众号,于是没接触过小程序的我...好的,直接进入主题. 如何在小程序里面退出小程序. 这个功能基本上都会用到,而文档里面没有找到如微信一样直接的api: WeixinJSBridge.call('closeWindow'); 于是我就各种上网搜,好的,结果告诉我小程序已经出了这个api,但未公开= =||| 那就是说 现在 是没有这个api的(掀桌!),查了又查,是有一个方法,就是利用现有的api自己做一个. 是的,就是用这几个美丽的东西. 首先我们有两个页面,i

  • 微信小程序事件对象中e.target和e.currentTarget的区别详解

    在小程序的事件回调触发时,会接收一个事件对象,事件对象的参数中包含一个target和currentTarget属性,接下来说说这二者的区别. 首先上代码: wxml部分: <view id='tar-father' bindtap='click'> 父组件 <view id='tar-children'>子组件</view> </view> wxss部分: #tar-father{ width: 300rpx; height: 300rpx; backgro

  • 微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】

    微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】

    本文实例讲述了微信小程序实现发送模板消息功能.分享给大家供大家参考,具体如下: 一.获取access_token access_token是接口调用的凭证,目前有效期为两个小时,需要定时刷新,重复获取将导致上次获取的access_token失效.(注:不建议每次调用需要access_token的接口,都去重新获取access_token,会导致失败) 获取access_token的接口地址: https://api.weixin.qq.com/cgi-bin/token?grant_type=c

  • 微信小程序按钮点击跳转页面详解

    微信小程序按钮点击跳转页面详解

    微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talkPage界面. 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:fail url "pages/index/talkPage" is not in app.j

  • 微信小程序常见页面跳转操作简单示例

    本文实例讲述了微信小程序常见页面跳转操作.分享给大家供大家参考,具体如下: 1.保留当前页面,跳转到应用内另一个页面:wx.navigateTo({ url: '页面路径', }) 实例: pageSkip :function(){ wx.navigateTo({ url: '/page/admin/details', }) }, 2.关闭当前页面,返回到上一级或多级页面:wx.navigateBack({ url: '页面路径', }) 实例: pageSkip :function(){ wx

  • 简单了解微信小程序 e.target与e.currentTarget的不同

    简单了解微信小程序 e.target与e.currentTarget的不同

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

  • 微信小程序中target和currentTarget的区别小结

    前言 在小程序中,e.target与e.currentTarget是非常重要的,尤其是涉及到页面传值时 currentTarget和target都是组件的一些属性值集合,由"data-属性名"定义的一些属性值 currentTarget:事件触发的当前事件(当前事件,可能是触发事件的源组件,可能是触发的事件组件(即触发事件源组件的子元素),此时点击子元素还是父元素,都是当前事件,应用e.currentTarget target:触发事件的源组件(事件注册/绑定所在组件) 举个例子: &

  • HBuilderX开发一个简单的微信小程序的实现步骤

    HBuilderX开发一个简单的微信小程序的实现步骤

    目录 一.配置 二.运行 一.配置 在微信开发者工具的设置中开启,如图: 在HBuilderX中新建项目,选择uni-app,如图: 在HBuilderX中编写代码 目录结构如图: 编写代码: index.less .content{ padding: 0 40rpx; image{ width: 100%; } .title{ display: block; text-align: center; font-size: 50rpx; font-weight: bold; } .operate{

  • 超简单的微信小程序轮播图

    超简单的微信小程序轮播图

    Tips:微信小程序可以在HbuilderX用HTML标签(如Ddiv.span等)写前端代码,也可以用微信小程序语法写(view.swiper标签),然后npm run dev编译后,在微信开发者工具里面导入该项目,就可以调试项目,查看效果. 效果图: 微信小程序实现轮播图,本例是在*.wpy页面开发(该页面的temlate内容对应小程序的wxml,style样式对应小程序的wxss,script对应小程序的js文件,config对应小程序的json文件) <style type="le

  • 简单了解微信小程序的目录结构

    简单了解微信小程序的目录结构

    前言 在开发小程序之前,我们首先需要对其目录结构进行了解,以便于提升开发效率. 我们使用微信开发者工具构建一个小程序项目,我们可以看到目录下生成了件. ① 以.json为后缀的JSON配置文件: ② 以.wxml为后缀的WXML模板文件,其可以看做是一个简洁的HTML页面,略有不同的则是文件后缀以及其中的部分标签不同: ③ 以.wxss为后缀的WXSS样式文件,也可以看做一个CSS样式文件: ④ 以.js为后缀的JS脚本文件. 在上图的示例中,我们可以看到根目录下有JS.JSON.WXSS类型文

  • 微信小程序开发入门基础教程

    微信小程序开发入门基础教程

    微信小程序开发入门基础教程 本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具 下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow

  • 微信小程序实现MUI数字输入框效果

    微信小程序实现MUI数字输入框效果

    本文实例为大家分享了微信小程序实现MUI数字输入框的具体代码,供大家参考,具体内容如下 效果图 WXML <view class="tui-content"> <view class="tui-gallery-list">默认</view> <view class="tui-gallery-list"> <view class="tui-number-group">

  • 微信小程序实现给嵌套template模板传递数据的方式总结

    本文实例总结了微信小程序实现给嵌套template模板传递数据的方式.分享给大家供大家参考,具体如下: 一.template模板调用的数据是单一形态时: indexTemplate模板: <import src="../lookAndCollect-template/lookAndCollect-template.wxml" /> <template name="indexTemplate"> <view class="use

  • 微信小程序slider组件使用详解

    微信小程序slider组件使用详解

    本文为大家分享了微信小程序slider组件的使用方法,供大家参考,具体内容如下 效果图 WXML <view class="tui-content"> <view class="tui-slider-head">设置step,当前设置步伐为5,当前值:{{slider1}}</view> <view class="tui-slider-box"> <slider bindchange=&quo

  • 一步步教会你微信小程序的登录鉴权

    一步步教会你微信小程序的登录鉴权

    前言 为了方便小程序应用使用微信登录态进行授权登录,微信小程序提供了登录授权的开放接口.乍一看文档,感觉文档上讲的非常有道理,但是实现起来又真的是摸不着头脑,不知道如何管理和维护登录态.本文就来手把手的教会大家在业务里如何接入和维护微信登录态,下面话不多说了,来一起看看详细的介绍吧. 接入流程 这里官方文档上的流程图已经足够清晰,我们直接就该图展开详述和补充. 首先大家看到这张图,肯定会注意到小程序进行通信交互的不止是小程序前端和我们自己的服务端,微信第三方服务端也参与其中,那么微信服务端在其中

随机推荐