事情由来：

写了一个点击事件，想获取根元素，想的直接用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的更多相关文章

  1. EditText 双击才能获取点击事件

    在获取EditText点击事件的过程中,发现EditText setOnClickListener事件响应中,只有获取焦点的时候才会响应, 如当焦点在别的控件上时,只能先点击获取焦点,第二次点击才会响 ...

  2. threejs Object的点击(鼠标)事件(获取点击事件的object)

    objects=[]; raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); //监听全局点击事件,通过ray检测选中哪一个o ...

  3. 事件冒泡和事件捕获以及解释target和currenttarget的区别

    冒泡和捕获的区别是冒泡事件是先触发子元素事件,再触发父元素事件,这个是冒泡.捕获是先触发父元素事件,再触发子元素事件.简单的来说,冒泡的顺序是由内到外,捕获的顺序是由外到内 举例:<!DOCTY ...

  4. jQuery通过event获取点击事件的事件对象

    要想搞明白js的事件机制,必须搞清楚几个概念:事件对象,事件源,还有事件流 事件对象: 当事件发生时会产生事件对象,事件对象的作用是用来记录“事件发生是一些相关的信息.注意事件对象只有在事件发生时才会 ...

  5. jquery 获取点击事件的id;jquery如何获取当前触发事件的控件ID值

    写html时这样绑定 <input type="text" name="address4" id="address4" onFocus ...

  6. 有关鼠标在页面body获取点击事件的问题

    首先说到这个问题我们先来谈谈body的高度问题,关于body高度的设置. 有些小伙伴可能就会说这个是多么的简单,直接进行如下操作不就可以了 body{ height:100%; } 这个设置虽然是想法 ...

  7. swift UITapGestureRecognizer获取点击事件点击的位置point

    func picTap(sender: UITapGestureRecognizer) { let point = sender.location(in: sender.view) } 其中获取的po ...

  8. android之View坐标系（view获取自身坐标的方法和点击事件中坐标的获取）

    在做一个view背景特效的时候被坐标的各个获取方法搞晕了,几篇抄来抄去的博客也没弄很清楚. 现在把整个总结一下. 其实只要把下面这张图看明白就没问题了. 涉及到的方法一共有下面几个: view获取自身 ...

  9. js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件

    js进阶 12-6 如何获取正在发生事件的名字和是哪个元素在发生事件 一.总结 一句话总结:event.type 描述事件的类型.        event.target 触发该事件的 DOM 元素. ...

随机推荐

  1. Oracle的日志记录模式

    本篇摘自 http://www.cnblogs.com/cnjava/archive/2012/04/09/2439497.html --=============================== ...

  2. 一天干掉一只Monkey计划（序）【转】

    http://www.cnblogs.com/Zephyroal/archive/2011/10/10/2206509.html 一天干掉一只Monkey计划(序) 一天干掉一只Monkey计划(序) ...

  3. Python中调用其他程序的方式

    前言 在Python中,可以方便地使用os模块来运行其他脚本或者程序,这样就可以在脚本中直接使用其他脚本或程序提供的功能,而不必再次编写实现该功能的代码.为了更好地控制运行的进程, 可以使用win32 ...

  4. HDU 4287-Intelligent IME(哈希)

    Intelligent IME Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  5. 打造你爱不释手的编辑器sublime3

    首先去官网下载你的sublime3 让后安装好package control 去package control官网 安装好package control 安装emmet,和格式化工具 接着安装一个好主 ...

  6. Django——基于类的视图源码分析 二

    源码分析 抽象类和常用视图(base.py) 这个文件包含视图的顶级抽象类(View),基于模板的工具类(TemplateResponseMixin),模板视图(TemplateView)和重定向视图 ...

  7. 小程序app is not defined

    错误记录: 小程序丨 报错:app is not defined; 解决方案: Js头部添加:var app = getApp();     返回按钮: wx.navigateBack();   转发 ...

  8. C# NPOI操作Excel（上）

    NPOI 官网下载DLL:http://npoi.codeplex.com/releases 1.读取Excel转为DataTable /// <summary> /// 读取excel转 ...

  9. 最小生成树之Kruskal算法和Prim算法

    依据图的深度优先遍历和广度优先遍历,能够用最少的边连接全部的顶点,并且不会形成回路. 这样的连接全部顶点并且路径唯一的树型结构称为生成树或扩展树.实际中.希望产生的生成树的全部边的权值和最小,称之为最 ...

  10. 如何修改两个PHP版本，php-v和phpinfo两个不同的版本

    先查找php.ini find / -name php.ini得出两个ini/usr/local/php/etc/php.ini/etc/php.ini php -i | grep php.ini查看 ...