从获取点击事件根元素谈 target和currentTarget
事情由来：
写了一个点击事件，想获取根元素，想的直接用current就行了，因为之前就是这么用的，但是之前的点击元素是没子元素的，current就是根元素，但是这次点击元素内部有子元素，current就是点击到的元素，点击子元素，获取的就是子元素，但是需求是无论点击元素哪里，都要获取到根元素，找了资料发现了 current 和currentTarget.
看代码：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css" media="screen">
.container1 {
width: 200px;
height: 50px;
border: 1px solid black;
float: right;
}
.container1 .item {
border: 1px solid red;
height: 20px;
width: 50px;
}
</style>
<div class="container1" onclick="click1(event)">
内容111
<div class="item"></div>
</div>
</body>
<script type="text/javascript">
function click1 (e) {
console.log('target')
console.log(e.target)
console.log('currentTarget')
console.log(e.currentTarget)
}
</script>
</html>
效果如下：
可以看出 current就是点击的当前元素，currentTarget 是绑定点击事件的根元素。
从获取点击事件根元素谈 target和currentTarget的更多相关文章
- EditText 双击才能获取点击事件
在获取EditText点击事件的过程中,发现EditText setOnClickListener事件响应中,只有获取焦点的时候才会响应, 如当焦点在别的控件上时,只能先点击获取焦点,第二次点击才会响 ...
- threejs Object的点击(鼠标)事件(获取点击事件的object)
objects=[]; raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); //监听全局点击事件,通过ray检测选中哪一个o ...
- 事件冒泡和事件捕获以及解释target和currenttarget的区别
冒泡和捕获的区别是冒泡事件是先触发子元素事件,再触发父元素事件,这个是冒泡.捕获是先触发父元素事件,再触发子元素事件.简单的来说,冒泡的顺序是由内到外,捕获的顺序是由外到内 举例:<!DOCTY ...
- jQuery通过event获取点击事件的事件对象
要想搞明白js的事件机制,必须搞清楚几个概念:事件对象,事件源,还有事件流 事件对象: 当事件发生时会产生事件对象,事件对象的作用是用来记录“事件发生是一些相关的信息.注意事件对象只有在事件发生时才会 ...
- jquery 获取点击事件的id;jquery如何获取当前触发事件的控件ID值
写html时这样绑定 <input type="text" name="address4" id="address4" onFocus ...
- 有关鼠标在页面body获取点击事件的问题
首先说到这个问题我们先来谈谈body的高度问题,关于body高度的设置. 有些小伙伴可能就会说这个是多么的简单,直接进行如下操作不就可以了 body{ height:100%; } 这个设置虽然是想法 ...
- swift UITapGestureRecognizer获取点击事件点击的位置point
func picTap(sender: UITapGestureRecognizer) { let point = sender.location(in: sender.view) } 其中获取的po ...
- android之View坐标系（view获取自身坐标的方法和点击事件中坐标的获取）
在做一个view背景特效的时候被坐标的各个获取方法搞晕了,几篇抄来抄去的博客也没弄很清楚. 现在把整个总结一下. 其实只要把下面这张图看明白就没问题了. 涉及到的方法一共有下面几个: view获取自身 ...
- js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件
js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件 一.总结 一句话总结:event.type 描述事件的类型. event.target 触发该事件的 DOM 元素. ...
随机推荐
- 如何看待Linux操作系统的用户空间和内核空间
作为中央核心处理单元的CPU,除了生产工艺的不断革新进步外,在处理数据和响应速度方面也需要有权衡.稍有微机原理基础的人都知道Intel X86体系的CPU提供了四种特权模式ring0~ring3,其中 ...
- char p[]与char *p的区别
#include <iostream> using namespace std; int main(void) { char *pp = "abc";//*pp指向的是 ...
- k8s debug记录之kubelet user.slice container monitor failure
在kubernetes中,如果使用其自带的单机启动脚本./hack/local-up-cluster.sh来启动一个本地集群的话,会在kubelet的日志中观察到类似以下内容的日志: Failed t ...
- Ubuntu ssh 代理
ssh代理命令 ssh -qTfnN -D 端口 用户名@远程机器地址 ssh全局代理 proxychains 程序 参数 proxychains 可以把从命令行启动的程序,用上ssh代理 prox ...
- RocketMQ的异步调用
这个异步调用方法中传入一个final 回调对象. public void invokeAsyncImpl(final Channel channel, final RemotingCommand re ...
- [Angular] Angular Custom Change Detection with ChangeDetectorRef
Each component has its own ChangeDetectorRef, and we can inject ChangeDetectorRef into constructor: ...
- [Spring boot] Configuring and Accessing a Data Source
We need our data persistence with configuring our datasouce: In application.properties: spring.h2.co ...
- 持续集成之代码质量管理-Sonar
原文:http://blog.csdn.net/abcdocker/article/details/53840582 Sonar介绍 Sonar 是一个用于代码质量管理的开放平台.通过插件机制,Son ...
- Android中Service概述
Service是Android中一种非常重要的组件,一般来说有两种用途:用Service执行长期执行的操作,而且与用户没有UI界面的交互:某个应用程序的Service能够被其它应用程序的组件调用以便提 ...
- 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-人机界面如何修改界面皮肤
切换到视图管理器,然后可以切换皮肤,会有预览效果 更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetaohai123 我的在线论坛: ...