从获取点击事件根元素谈 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 是绑定点击事件的根元素。

原文地址:https://www.cnblogs.com/yalong/p/9776982.html

时间: 2024-08-06 03:48:16

从获取点击事件根元素谈 target和currentTarget的相关文章

EditText 双击才能获取点击事件

在获取EditText点击事件的过程中,发现EditText setOnClickListener事件响应中,只有获取焦点的时候才会响应, 如当焦点在别的控件上时,只能先点击获取焦点,第二次点击才会响应,解决办法改用setOnTouchListener监听, android.view.View下的OnTouchListener接口是只要触摸(touch)状态改变,就会触发该事件. 代码如下: woman_SDloadText.setOnTouchListener(new View.OnTouch

怎样获取文档的根元素节点

所谓根元素节点, 一般是文档声明节点之后的第一个节点: html 获取它的方法有许多, 这里列举四种: 1. document.documentElement document.documentElement.nodeName; // "HTML" 2. document.firstElementChild document.firstElementChild.nodeName; // "HTML" 3. document.lastChild document.la

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

冒泡和捕获的区别是冒泡事件是先触发子元素事件,再触发父元素事件,这个是冒泡.捕获是先触发父元素事件,再触发子元素事件.简单的来说,冒泡的顺序是由内到外,捕获的顺序是由外到内 举例:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #son{ width: 200px

使listview下的控件获取点击事件,android:descendantFocusability用法简析

开发中很常见的一个问题,项目中的listview不仅仅是简单的文字,常常需要自己定义listview,自己的Adapter去继承BaseAdapter,在adapter中按照需求进行编写,问题就出现了,可能会发生点击每一个item的时候没有反应,无法获取的焦点.原因多半是由于在你自己定义的Item中存在诸如ImageButton,Button,CheckBox等子控件(也可以说是Button或者Checkable的子类控件),此时这些子控件会将焦点获取到,所以常常当点击item时变化的是子控件,

AutoCAD中获取鼠标右键点击事件(根据明经论坛ahlzl文章改写)

using Autodesk.AutoCAD.ApplicationServices; using Autodesk.AutoCAD.Runtime; [assembly:CommandClass(typeof(TestRunCommand.Class1))] namespace TestRunCommand { public class Class1 { const int WM_RBUTTONDOWN = 516; [CommandMethod("TestRunCommand")]

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

首先说到这个问题我们先来谈谈body的高度问题,关于body高度的设置. 有些小伙伴可能就会说这个是多么的简单,直接进行如下操作不就可以了 body{ height:100%; } 这个设置虽然是想法是对的,但是你发现更本就不得行,那么必须就要进行如下的操作 html,body{ height:100%; } 好了这个基本上就能解决body高度不能自适应的问题了.可能会存在一些没有自适应的问题,但是也基本不影响页面的布局. 现在我们切入正题 关于获取页面鼠标点击时的坐标,我们直接用下面的方式来操

vue.js click点击事件获取当前元素对象及获取自定义属性

Vue.js可以传递$event对象 <body id="app"> <ul> <li :data-price="m.price" v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({

android开发之View坐标系(view获取自身坐标的方法和点击事件中坐标的获取)

在做一个view背景特效的时候被坐标的各个获取方法搞晕了,几篇抄来抄去的博客也没弄很清楚. 现在把整个总结一下. 其实只要把下面这张图看明白就没问题了. 涉及到的方法一共有下面几个: view获取自身坐标:getLeft(),getTop(),getRight(),getBottom() view获取自身宽高:getHeight(),getWidth() motionEvent获取坐标:getX(),getY(),getRawX(),getRawY() 首先是view的几个方法, 获取自身的宽高

jquery 点击tr选中checkbox,解决checkbox的默认点击事件被阻止的问题

  1.第一种,!$(event.target).is('input'),判断触发事件的元素是否为input.此时使用event.target,而不是this,获取事件本身,防止触发事件冒泡的问题. $("#data_table tr").on("click",function (event) { if (!$(event.target).is('input')) { $('input:checkbox', this).prop('checked', functio