<!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. SQL server 基本语法
			
    文字摘自https://www.cnblogs.com/chaoa/articles/3894311.html 一.定义变量 --简单赋值 declare @a intset @a=5 print @ ...
    
			
    2. 
						
  2. io输出流变为输入流
			
    java 输出流转化为输入流 new ByteArrayInputStream(byteArrayOutputStream.toByteArray());
    
			
    3. 
						
  3. matlab   stereo_gui立体标定
			
    http://www.vision.caltech.edu/bouguetj/calib_doc/index.html#examples 文档中举了几个例子,有关双目的是第5个, 这个例子展示了如何使 ...
    
			
    4. 
						
  4. Android Studio 统计行数
			
    开发中常常会想看看自己累积在这个项目中写了多少代码了,以下就是在Android Studio查看统计项目代码总行数的方法. 打开Android Studio,按快捷键Ctrl+Shift+A 输入fi ...
    
			
    5. 
						
  5. kali域名解析错误解决
			
    浏览器出现不能上网的的现象,推测是DNS解析有问题,想要修改DNS vim /etc/resolv.conf nameserver 202.96.134.133 nameserver 114.114. ...
    
			
    6. 
						
  6. day31 粘包问题
			
    TCP粘包问题 cmd客户端代码 import socket import struct import socket import json c = socket.socket() c.connect ...
    
			
    7. 
						
  7. pandas中关于DataFrame 去除省略号
			
    #显示所有列 pd.set_option('display.max_columns', None) #显示所有行 pd.set_option('display.max_rows', None) #设置 ...
    
			
    8. 
						
  8. poj 1789 prime
			
    链接:Truck History - POJ 1789 - Virtual Judge  https://vjudge.net/problem/POJ-1789 题意:先给出一个n,代表接下来字符串的 ...
    
			
    9. 
						
  9. bulk
			
    bulk - 必应词典 美[bʌlk]英[bʌlk] n.大部分:主体:(大)体积:大(量) v.扩展:增大:堆积起来:形成大块 网络散装:大批:大量 变形复数:bulks:现在分词:bulking: ...
    
			
    10. 
						
  10. TZOJ 3030 Courses(二分图匹配)
			
    描述 Consider a group of N students and P courses. Each student visits zero, one or more than one cour ...
    
			
    11.