<!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. redis集群实战
			
    一.说明 redis 3.0集群功能出来已经有一段时间了,目前最新稳定版是3.0.5,我了解到已经有很多互联网公司在生产环境使用,比如唯品会.美团等等,刚好公司有个新项目,预估的量单机redis无法满 ...
    
			
    2. 
						
  2. hdu2669-Romantic-（扩展欧几里得定理）
			
    Romantic Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...
    
			
    3. 
						
  3. Python基础学习Day7             基础数据类型的扩展    集合    深浅copy
			
    一.基础数据类型的扩展 1.1GBK ---> UTF - 8 # str --->bytes s1 = '太白' # 字符串是unicode编码 b1 = s1.encode('gbk' ...
    
			
    4. 
						
  4. mysql 分配内存大小配置
			
    优化 innodb_buffer_pool_size  = 10*1024*1024*1024
    
			
    5. 
						
  5. 内存占用过高 kill  调整mysql内存占用
			
    通过 /var/log/messages  查看  被系统kill掉的进程   如果是自己崩溃会产生 hs_err_ 修改mysql  my.cnf    innodb_buffer_pool_siz ...
    
			
    6. 
						
  6. java-学习4
			
    一.八大数据类型—dataType 整型 1)byte 2)short 3)int 4)long 浮点型 5)float 6)double 字符型 7)char 布尔型 8)boolean 二.变量和 ...
    
			
    7. 
						
  7. 05_ssm基础(一)之mybatis简单使用
			
    01.mybatis使用引导与准备 1.ssm框架 指: sping+springMVC+mybatis 2.学习mybatis前准备web标准项目结构 model中的Ticket代码如下: pack ...
    
			
    8. 
						
  8. excel 数据量较大边查询边输入到excel表格中
			
    public Resultmodel getexpenseMessagx(HttpServletResponse response, String date1, String date2) { lon ...
    
			
    9. 
						
  9. 解题2（IpIsSameSubNet）
			
    题目描述 子网掩码是用来判断任意两台计算机的IP地址是否属于同一子网络的根据.子网掩码与IP地址结构相同,是32位二进制数,其中网络号部分全为“1”和主机号部分全为“0”.利用子网掩码可以判断两台主机 ...
    
			
    10. 
						
  10. PUDN用户名与密码
			
    Pudn 用户名与密码 boumang8171    que2538  温馨提示:1.  95%的用户第一次登录不成功,都是因为在复制粘贴帐号和密码时,把空格也复制粘贴上了.2. 如果连续3次帐号或密 ...
    
			
    11.