事情由来:

写了一个点击事件,想获取根元素,想的直接用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. php之文件类型解析漏洞防御与攻击

    php在处理文件上传时,经常可以用到下面几种方式来判断文件的类型 1.通过文件名后缀,不安全,非常容易欺骗2.通过mime判断,部分类型的文件通过修改文件后缀名,也可以欺骗服务器3.通过头字节判断文件 ...

  2. Render Texture coordinates

    https://docs.unity3d.com/550/Documentation/Manual/SL-PlatformDifferences.html Render Texture coordin ...

  3. webpack配置:打包第三方类库、第三方类库抽离、watch自动打包、集中拷贝静态资源

    一.打包第三方类库 下面说2种方法: 第一种: 1.引入jQuery,首先安装: npm install --save-dev jquery 2.安装好后,在index.js中引入,用jquery语法 ...

  4. Laravel 5系列教程六:表单 Forms

    免费视频教程地址https://laravist.com/series/laravel-5-basic 在开始之前,我们把界面先美化一点点先: 首先到https://github.com/JellyB ...

  5. Yii2系列教程五:简单的用户权限管理

    上一篇文章讲了用户的注册,验证和登录,这一篇文章按照约定来说说Yii2之中的用户和权限控制. 你可以直接到Github下载源码,以便可以跟上进度,你也可以重头开始,一步一步按照这个教程来做. 鉴于本教 ...

  6. 【web】Ubuntu上安装nodejs 4.x 5.x版本方法

    在Linux(ubuntu server)上面安装NodeJS的正确姿势 上一篇文章,我介绍了 在Windows中安装NodeJS的正确姿势,这一篇,我们继续来看一下在Linux上面安装和配置Node ...

  7. qml自学笔记------自己写相似于劲舞团的按键小游戏(中)

    接上篇<qml自学笔记------自己写类似于劲舞团的按键小游戏(上)> 第三部分DisplayPart.qml 代码的其它部分都是渣,就这里花了点时间,整个小游戏就靠这个文件. 首先,屏 ...

  8. 以前积攒的一个用Java程序生成验证码的代码

    一个Java类: package com.abc.ufo.util; import java.awt.Color; import java.awt.Font; import java.awt.Grap ...

  9. [BestCoder Round #3] hdu 4908 BestCoder Sequence (计数)

    BestCoder Sequence Problem Description Mr Potato is a coder. Mr Potato is the BestCoder. One night, ...

  10. 网络编程基础——学习阻塞,非阻塞(select和epoll)

    <h3 class="xyn" helvetica="" neue',="" helvetica,="" aria ...