Vue中注意target和currentTarget的使用
在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的使用的更多相关文章
- js中的target与currentTarget的区别<转>
关于js中target与currentTarget的区别的关键在于他们所处在的事件流的阶段是不一样的,target处于事件流的目标阶段,currentTarget处理事件流的捕获.处于目标阶段和冒泡阶 ...
- 微信小程序中的target和currentTarget区别
最近在学习微信小程序相关知识,其中提到了两个属性target和currentTarget,其中target是指向触发事件的元素(常见于事件委托中),而currentTarget是指向捕获事件的元素(即 ...
- AS3中 Event 类的target和currentTarget属性
在事件处理过程中,会自动生成事件类的实例,并传给侦听器函数.通过这个参数就可以使用事件类的属性和方法.其中target与currentTarget属性是两个很相似的属性. 对于简单的事件处理过程,分清 ...
- 微信小程序中target与currentTarget
target在事件流的目标阶段:currentTarget在事件流的捕获,目标及冒泡阶段.但事件流处于目标阶段,target与currentTarget指向一样, 而当处于捕获和冒泡阶段的时候,tar ...
- vue中的input使用e.target.value赋值的问题
很久不写博客了... vue中对表单的处理,相对原生js,增加了一个双向绑定的语法糖:v-model.官方文档里有一段: v-model 会忽略所有表单元素的 value.checked.select ...
- 关于js中event的target和currentTarget的区别
今天又遇到这个问题了,总是搞不清楚target和currentTarget的区别,百度搜索的时候看到一遍文章解释得很清楚,特意记录下录,以备不时之需: target与currentTarget的区别? ...
- 小程序开发 event对象中 target和currentTarget 属性的区别。
首先本质区别是: event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 p包含在div内 在outer上点击时,target跟currentTarget ...
- vue中遇到的坑
如何解决在vue中替换图片.一个使用base64,而我们使用zepto之后,src找不到资源,因为已经打包了,难道强行写base64. 1. 引入文件时语法很重要! import "Foot ...
- 在Vue中使用JSX,很easy的
摘要:JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javasc ...
随机推荐
- Python中文分词组件 jieba
jieba "结巴"中文分词:做最好的Python中文分词组件 "Jieba" Feature 支持三种分词模式: 精确模式,试图将句子最精确地切开,适合文本分 ...
- 百度编辑神器ueditor在ajax或form提交内容时候异常
百度编辑神器ueditor在ajax或form提交内容时候异常,一:⑴web.config中<system.web> <httpRuntime requestValidationMo ...
- promises的深入学习
Promise 的含义 § ⇧ Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供 ...
- STM32/MINI
- Centos7 更改网卡名称
cd /etc/sysconfig/network-scripts/ 将要改名的网卡配置文件重命名,例如 mv ifcfg-eth1 ifcfg-eth0 vim ifcfg-eth0 修改devic ...
- Java常见Exception类型及中文翻译
地址:http://rymden.nu/exceptions.html 翻译: java.lang ArithmeticException 你正在试图使用电脑解决一个自己解决不了的数学问题,请重新阅读 ...
- Some notes of The Peter Principle
管理学读书笔记之彼得原理 chapter0 绪论为什么有这么多不称职现象?姑息错误或纵容懒惰.偶然事故都不是问题根源,关键是我们的社会为不称职现象提供土壤,并对其有所鼓励. chapter1 彼得原理 ...
- DBSCAN算法及sklearn实现
基本概念:(Density-Based Spatial Clustering of Application with Noiso) 1.核心对象: 若某个点的密度达到算法设定的阈值则其为核心点.(即r ...
- [易学易懂系列|rustlang语言|零基础|快速入门|(24)|实战2:命令行工具minigrep(1)]
[易学易懂系列|rustlang语言|零基础|快速入门|(24)|实战2:命令行工具minigrep(1)] 项目实战 实战2:命令行工具minigrep 有了昨天的基础,我们今天来开始另一个稍微有点 ...
- 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 ...