<!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. Oracle Error
			
    1. TNS:listener does not currently know of service requested in connect descriptor 数据库连接出错
    
			
    2. 
						
  2. 编程四剑客awk
			
    awk  'pattern +{action}' file (1)AWK基本语法参数详解 a:单引号 ''是为了和shell命令区分开: b:大括号{}表示一个命令分组: c:pattern 是一个过 ...
    
			
    3. 
						
  3. ubuntu16 安装openssh-server 一直安装不上Unable to correct problems, you have held broken packages
			
    zengqi@zengqi:~$ sudo apt-get install openssh-server Reading package lists... DoneBuilding dependenc ...
    
			
    4. 
						
  4. java-学习2
			
    第一节 Java语言介绍 1.Java的起源 Oak-->Java      交互式操作智能家居 2.Java的发展 Java1.0 Java1.2    JavaSE  :Java平台标准版  ...
    
			
    5. 
						
  5. shell 通过shift获得某位后的入参
			
    有时shell的入参个数不定,想要获得第2位后的参数,作为新的入参调用其他脚本   通常这时候想到的方法是用遍历,例如下面的方法: for (( i=2;i<=$#;i++)) do       ...
    
			
    6. 
						
  6. weechat 常用指令
			
    添加服务器: /server add freenode irc.freenode.org 设置nick: /set irc.server.freenode.nicks "mynick,myn ...
    
			
    7. 
						
  7. js中获取一个对象里面的方法和属性的javascript
			
    <script type="text/javascript"> var obj = { attribute:1, method:function() { alert(& ...
    
			
    8. 
						
  8. linux下主从同步和redis的用法
			
    前言 mariadb其实就是mysql mysql已经被oracle收购,它即将闭源,马上要开始收费了因此还想免费试用开源的数据库mysql,就在centos7上,将mysql分支为mariadb 操 ...
    
			
    9. 
						
  9. TOJ 4829: 计算器的改良
			
    Python写法! 传送门:http://acm.tzc.edu.cn/acmhome/problemdetail.do?&method=showdetail&id=4829 描述 N ...
    
			
    10. 
						
  10. c++实现循环队列
			
    #include <iostream> #include<stdio.h> #include<stdlib.h> using namespace std; ;//  ...
    
			
    11.