事情由来：

写了一个点击事件，想获取根元素，想的直接用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. Kubernetes环境下调整WebLogic JVM基本参数

    基于Kubernetes启动WebLogic后,发现JVM的最大heap size一直在700多M左右,通过 kubectl logs 察看pod启动状态,发现日志中并没有-Xms和-Xmx参数.日志 ...

  2. OpenStack制作Windows 2008 KVM镜像

    1.下载驱动程序 [root@linux-node1 ~]# cd /usr/local/src [root@linux-node1 src]# wget https://launchpad.net/ ...

  3. TP视图命名规则之一

    TP视图命名规则之一   如果觉得目录结构太深,可以通过设置 TMPL_FILE_DEPR 参数来配置简化模板的目录层次,例如设置: 'TMPL_FILE_DEPR'=>'_' 默认的模板文件就 ...

  4. Odoo8在TreeView左上角增加自定义按钮以及通过继承生成自定义的View_Mode

    今天有网友在问怎么在TreeView左上角增加一个自定义的按钮,在查询Odoo 自带的模块,发现在purchase_requisition中有使用,并且此模块还应用到了自定义View_Mode的情况, ...

  5. android:numColumns="auto_fit" 失效问题

    GridView 设置此属性无效:android:numColumns="auto_fit" ,请确认已经设置过 android:columnWidth="*dp&quo ...

  6. 【Python3 爬虫】02_利用urllib.urlopen向百度翻译发送数据并返回结果

    上一节进行了网页的简单抓取,接下来我们详细的了解一下两个重要的参数url与data urlopen详解 urllib.request.urlopen(url, data=None, [timeout, ...

  7. iOS蓝牙原生封装，助力智能硬件开发

    代码地址如下:http://www.demodashi.com/demo/12010.html 人工智能自1956年提出以来,一直默默无闻,近年来人工智能的发展得到重视逐渐发展起步,智能硬件.智能手环 ...

  8. iOS开发－drawRect方法小技巧（超短）

    获取画布: CGContextRef context = UIGraphicsGetCurrentContext(); 设置颜色的三种方法: [[UIColor blueColor] setStrok ...

  9. Hibernate中所有包作用详细讲解

    http://liyanblog.cn/articles/2012/09/17/1347848802900.html Hibernate一共包括了23个jar包,令人眼花缭乱.本文将详细讲解Hiber ...

  10. Linux下默认的目录介绍

    目录/文件 用途 来源 / /处于Linux文件系统树形结构的最顶端,它是Linux文件系统的入口,所有的目录.文件.设备都在/之下. - /bin 该目录存放着系统最常用的最重要的命令,相当于DOS ...