<!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. 使用tf.print()打印tensor内容
			
    使用tf.Print()打印tensor内容,这是tensorflow中调试bug的一个手段,例子如下所示: import tensorflow as tf a = tf.Variable(tf.ra ...
    
			
    2. 
						
  2. @JsonInclude注解，RestTemplate传输值为null的属性，利用FastJson将属性中有空值null的对象转化成Json字符串
			
    一个pojo类: import lombok.Data; @Data public class Friend { private String name; private int age; priva ...
    
			
    3. 
						
  3. 微信小程序 在canvas画布上划动，页面禁止滑动
			
    要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...
    
			
    4. 
						
  4. openstack 资料
			
    调用流程 https://blog.csdn.net/bill_xiang_/article/details/72909927
    
			
    5. 
						
  5. sass  使用clac的问题
			
    最后在github的issue中找到了方法,要想在sass的calc中使用变量,必须对这个变量使用sass的插值方法(#{$variable}). 所以把代码改正下面的形式就可以了: width: c ...
    
			
    6. 
						
  6. openlayers/// Puppeteer.js
			
    1.定位;https://viglino.github.io/ol3-ext/examples/map.interaction.geolocationdraw.html 2 .添加Overlay  d ...
    
			
    7. 
						
  7. Jmeter（二十七）模拟发送TCP/UDP/HTTP/FTP等请求包（转载）
			
    转载自 http://www.cnblogs.com/yangxia-test JMeter安装UDP插件后支持发送UDP协议的请求包,官方介绍安装插件后可以用来测试DNS, NTP, TFTP, B ...
    
			
    8. 
						
  8. Python基础之初始编码
			
    前言 程序中的编码问题你不搞明白,那么你的程序生涯中它会像幽灵一样伴随着你的职业生涯. 首先要搞清楚一个概念:计算机中认识什么?它认识的是010101这种二进制,却不认识中文不认识英文 那么,这个时候 ...
    
			
    9. 
						
  9. elasticsearch ik安装
			
    /usr/share/elasticsearch/bin/elasticsearch-plugin install https://github.com/medcl/elasticsearch-ana ...
    
			
    10. 
						
  10. vue， js 正则邮箱验证、匹配非法字符、匹配中文
			
    验证邮箱 let self = this let regEmail= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)* ...
    
			
    11.