在vue中获取对象时注意event.currentTarget与event.target的区别。

event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素。

列如:

<a href="javascript:;" @click="openPlays($event)" class="openplays-btn">
展开
<br>
<i class="iconfont"></i>
</a>

  

当点击a时触发openPlays,并且往openPlays中传入当前对象

openPlays (e) {
console.log(e.target,e.currentTarget)
}

  

当点击i区域之外时获取到的对象分别为:

因为没点击到其他的元素,所以event.currentTarget与event.target两者获取到的对象都是一样的。

当点击a中的i时event.target与event.currentTarget获取到的对象分别为:

从上面的结果可以看出当使用currentTarget时,不管你点击的是a或者a之中的任何元素,其获取到的对象都为绑定事件的a;当使用target时,如果你点击到a元素则传a元素,如果点击到a之中的某个子级元素则传a之中的某个元素。

Vue中注意target和currentTarget的使用的更多相关文章

  1. js中的target与currentTarget的区别<转>

    关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶 ...

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

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

  3. AS3中 Event 类的target和currentTarget属性

    在事件处理过程中,会自动生成事件类的实例,并传给侦听器函数.通过这个参数就可以使用事件类的属性和方法.其中target与currentTarget属性是两个很相似的属性. 对于简单的事件处理过程,分清 ...

  4. 微信小程序中target与currentTarget

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

  5. vue中的input使用e.target.value赋值的问题

    很久不写博客了... vue中对表单的处理,相对原生js,增加了一个双向绑定的语法糖:v-model.官方文档里有一段: v-model 会忽略所有表单元素的 value.checked.select ...

  6. 关于js中event的target和currentTarget的区别

    今天又遇到这个问题了,总是搞不清楚target和currentTarget的区别,百度搜索的时候看到一遍文章解释得很清楚,特意记录下录,以备不时之需: target与currentTarget的区别? ...

  7. 小程序开发 event对象中 target和currentTarget 属性的区别。

    首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 p包含在div内 在outer上点击时,target跟currentTarget ...

  8. vue中遇到的坑

    如何解决在vue中替换图片.一个使用base64,而我们使用zepto之后,src找不到资源,因为已经打包了,难道强行写base64. 1. 引入文件时语法很重要! import "Foot ...

  9. 在Vue中使用JSX,很easy的

    摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...

随机推荐

  1. Python中文分词组件 jieba

    jieba "结巴"中文分词:做最好的Python中文分词组件 "Jieba" Feature 支持三种分词模式: 精确模式,试图将句子最精确地切开,适合文本分 ...

  2. 百度编辑神器ueditor在ajax或form提交内容时候异常

    百度编辑神器ueditor在ajax或form提交内容时候异常,一:⑴web.config中<system.web> <httpRuntime requestValidationMo ...

  3. promises的深入学习

    Promise 的含义 § ⇧ Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供 ...

  4. STM32/MINI

  5. Centos7 更改网卡名称

    cd /etc/sysconfig/network-scripts/ 将要改名的网卡配置文件重命名,例如 mv ifcfg-eth1 ifcfg-eth0 vim ifcfg-eth0 修改devic ...

  6. Java常见Exception类型及中文翻译

    地址:http://rymden.nu/exceptions.html 翻译: java.lang ArithmeticException 你正在试图使用电脑解决一个自己解决不了的数学问题,请重新阅读 ...

  7. Some notes of The Peter Principle

    管理学读书笔记之彼得原理 chapter0 绪论为什么有这么多不称职现象?姑息错误或纵容懒惰.偶然事故都不是问题根源,关键是我们的社会为不称职现象提供土壤,并对其有所鼓励. chapter1 彼得原理 ...

  8. DBSCAN算法及sklearn实现

    基本概念:(Density-Based Spatial Clustering of Application with Noiso) 1.核心对象: 若某个点的密度达到算法设定的阈值则其为核心点.(即r ...

  9. [易学易懂系列|rustlang语言|零基础|快速入门|(24)|实战2:命令行工具minigrep(1)]

    [易学易懂系列|rustlang语言|零基础|快速入门|(24)|实战2:命令行工具minigrep(1)] 项目实战 实战2:命令行工具minigrep 有了昨天的基础,我们今天来开始另一个稍微有点 ...

  10. SpringMVC配置文件详解:<context:annotation-config/>和<context:component-scan base-package=""/>和<mvc:annotation-driven />

    原文地址:https://www.cnblogs.com/lcngu/p/5080702.html Spring配置文件详解:<context:annotation-config/>和&l ...