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

 更新时间:2019年09月27日 15:29:57   作者:不睡  
这篇文章主要介绍了微信小程序 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:当前组件对象(就是当前对象)

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

相关文章

  • JS实现页面打印功能

    JS实现页面打印功能

    本文主要介绍了JS实现页面打印功能的方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 原生JS简单实现ajax的方法示例

    原生JS简单实现ajax的方法示例

    这篇文章主要介绍了原生JS简单实现ajax的方法,结合实例形式分析了ajax的实现步骤与相关使用技巧,需要的朋友可以参考下
    2016-11-11
  • cocos2dx+lua实现橡皮擦功能

    cocos2dx+lua实现橡皮擦功能

    这篇文章主要为大家详细介绍了cocos2dx+lua实现橡皮擦功能,类似刮刮乐效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • ES6新特性一: let和const命令详解

    ES6新特性一: let和const命令详解

    这篇文章主要介绍了ES6新特性中的let和const命令,结合实例形式分析了let和const命令的功能、使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • layui的表单提交以及验证和修改弹框的实例

    layui的表单提交以及验证和修改弹框的实例

    今天小编就为大家分享一篇layui的表单提交以及验证和修改弹框的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • bootstrap监听滚动实现头部跟随滚动

    bootstrap监听滚动实现头部跟随滚动

    这篇文章主要为大家详细介绍了bootstrap监听滚动实现头部跟随滚动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JavaScript offset实现鼠标坐标获取和窗口内模块拖动

    JavaScript offset实现鼠标坐标获取和窗口内模块拖动

    在页面开发时我们少不了各种鼠标交互动作,那么JavaScript中如何实现鼠标坐标获取和窗口内模块拖动,本文就详细的介绍一下,感兴趣的可以了解一下
    2021-05-05
  • 详解js根据百度地图提供经纬度计算两点距离

    详解js根据百度地图提供经纬度计算两点距离

    这篇文章主要介绍了js根据百度地图提供经纬度计算两点距离,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 微信小程序仿抖音短视频切换效果的实例代码

    微信小程序仿抖音短视频切换效果的实例代码

    这篇文章主要介绍了微信小程序仿抖音短视频切换效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • ES6 系列之 Generator 的自动执行的方法示例

    ES6 系列之 Generator 的自动执行的方法示例

    这篇文章主要介绍了ES6 系列之 Generator 的自动执行的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10

最新评论