<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        li{
            border: 1px solid #ccc;
        }
        div{
            border: 1px solid green;
        }
    </style>
</head>
<body>
    <ul name='grandfather'>
        1
        <li name='father'>
            1-1
            <div name='son'>
                1-1-1
                <div>1-1-1-1</div>
                <div>1-1-1-2</div>　
            </div>
            <div name='son'>
                1-1-2
                <div>1-1-2-1</div>
                <div>1-1-2-2</div>　
            </div>
            <div name='son'>
                1-1-3
                <div> 1-1-3-1</div>
                <div> 1-1-3-2</div>　
            </div>
        </li>
        <li>
            1-2
            <div>1-2-1</div>
            <div>1-2-2</div>
        </li>
        <li>
            1-3
            <div> 1-3-1</div>
            <div> 1-3-2</div>
        </li>
    </ul>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $('ul').on('click','li',function(event){
            //event.stopPropagation();
            console.log('this是'+$(this).attr('name'))
            console.log('$this的儿子的name是'+$(this).children().attr('name'))
            $(this).children().css('color','red');
        });
    </script>
</body>
</html>


上面例子说明：


·e.target是点击的目标元素；


·this是指向事件所绑定的元素（这里是li,click后面那个）；


有人说，this也是指向点击的目标元素，只是因为冒泡而最终指向事件所绑定的元素。但当上述代码中加入event.stopPropagation()后，冒泡被阻止，this与e.target效果并不一样，


所以this并不是指向点击的目标元素，而是直接指向事件所绑定的元素。


下面例子，通过有无阻止冒泡加强说明：




<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>e.target</title>

    <script src="js/jquery-1.11.3.js"></script>

</head>

<body>

<div id="temp"></div>

<ul class="JQ-content-box" style="padding:20px; background:#FFFFFF" name="祖先1">

    祖先1

    <li name="祖先2">

        祖先2

        <ul name="祖先3">

            祖先3

            <li name="这是公告标题1">这是公告标题1</li>

            <li name="这是公告标题2">这是公告标题2</li>

            <li name="这是公告标题3">这是公告标题3</li>

            <li name="这是公告标题4">这是公告标题4</li>

        </ul>

    </li>

</ul>

<script>

    $(function(){

        $("ul").on("click",function(e){

            //e.stopPropagation();

            console.log('e.target为：'+$(e.target).attr('name'));

            console.log('this为：'+$(this).attr('name'));

            $("#temp").html("clicked: " + e.target.nodeName);

            $(e.target).css("color","#FF3300");

        })

    });

</script>

</body>

</html>




转载请注明出处：http://www.cnblogs.com/jacksplwxy/p/6652558.html
												


											
(O)jquery：e.target和this的区别（如何使事件委托后，被选元素的子元素不被选中）的更多相关文章
	

    
								
  1. jQuery判断一个元素是否为另一个元素的子元素
		
    判断:当前元素是否是被筛选元素的子元素 jQuery.fn.isChildOf = function(b){ return (this.parents(b).length > 0); }; 判断 ...
    
		
    2. 
						
  2. jQuery判断一个元素是否为另一个元素的子元素(或者其本身)
		
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head& ...
    
		
    3. 
						
  3. jquery选择器 之 获取父级元素、同级元素、子元素
		
    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
    
		
    4. 
						
  4. jQuery学习笔记---兄弟元素、子元素和父元素的获取
		
    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
    
		
    5. 
						
  5. jquery查找父元素、子元素(个人经验总结)
		
    使用js或者jquery查找父元素.子元素经常遇到.可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents( ...
    
		
    6. 
						
  6. js与jquery获取父元素,删除子元素的不同方法
		
    var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...
    
		
    7. 
						
  7. jquery选择器 之 获取父级元素、同级元素、子元素 - yes的日志 - 网易博客
		
    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
    
		
    8. 
						
  8. jquery获取元素（父级的兄弟元素的子元素）
		
    一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(t ...
    
		
    9. 
						
  9. jquery选择器:获取父级元素、同级元素、子元素
		
    jQuery的出现给广大开发者提供了不少的方便.从要自己一个一个敲代码,到直接调用方法,无疑大大地提高了网站开发的效率.而在jQuery中有一些方法非常的实用.下面就给大家介绍下jquery选择器:获 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. C# 监测每个方法的执行次数和占用时间（测试2）
			
    在Nuget引用 Castle.DynamicProxy 和 Newtonsoft.Json 这个 原文:http://www.cnblogs.com/RicCC/archive/2010/03/15 ...
    
			
    2. 
						
  2. Oracle 监听器日志解析
			
    Oracle监听器是驻留在Oracle实例所在服务器上的独立进程.作为客户端进程连接实例的重要沟通组件,Oracle监听器扮演着重要的地位.本篇将从监听器日志入手,分析阅读监听器日志和日常监听器常见行 ...
    
			
    3. 
						
  3. HTTP中的Get与Post
			
    Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这 样认为:一个URL地址,它用于描述一个网络上的资源,而HTT ...
    
			
    4. 
						
  4. servlet 3.1 摘录
			
    https://www.oschina.net/translate/non-blocking-io-using-servlet-3-1?cmp 非阻塞IO AsyncContext context = ...
    
			
    5. 
						
  5. vuejs  组件通讯
			
    在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA(single-page application 简称为 SPA)中的组件间传值. 一.路由传值 路由对象如下图所示: 在跳转页面的时 ...
    
			
    6. 
						
  6. orthodb
			
    1.数据库 orthodb数据: odb10v0_levels.tab.gz: NCBI taxonomy nodes where Ortho DB orthologous groups (OGs)  ...
    
			
    7. 
						
  7. vue / js使用video获取视频时长
			
    项目中遇到上传视频功能,需要有预览和获取视频时长功能,因之前使用upload(有需要的话可以参考下我之前的文章),这里就不赘述,直接用来上传视频,不过在上传之前和上传成功后的钩子里,获取不到时长: 没 ...
    
			
    8. 
						
  8. as3.0影片简介失效，不阻碍下面影片简介的事件
			
    mast.mouseEnabled=false; mast.mouseChildren=false;
    
			
    9. 
						
  9. LightOJ - 1027 Dangerous Maze  期望
			
    你在迷宫中;开始时在你面前看到n扇门.你可以选择你喜欢的任何门.所有门的选择门的概率是相等的. 如果您选择第i个门,它可以让您回到您在xi(xi小于0)分钟内开始的相同位置,也可以在xi(xi大于0) ...
    
			
    10. 
						
  10. nexus（Maven仓库私服）的安装、配置、使用和仓库迁移
			
    简介 Nexus下载:点击进入 Nexus 是Maven仓库管理器,如果你使用Maven,你可以从Maven中央仓库 下载所需要的构件(artifact),但这通常不是一个好的做法,你应该在本地架设一 ...
    
			
    11.