您的位置：首页 > Web前端 > javascript > 正文

stopPropagation、return false、preventDefault区别

更多 时间：2017-4-23 类别：Web前端 浏览量：408

stopPropagation、return false、preventDefault区别

stopPropagation、return false、preventDefault区别

一、event.stopPropagation

事件处理过程中，阻止了事件冒泡，但不会阻击默认行为，例如：超链接的跳转

 

二、return false

事件处理过程中，阻止了事件冒泡，也阻止了默认行为

 

三、event.preventDefault

事件处理过程中，不阻击事件冒泡，但阻击默认行为

 

四、通过一个实例说明三者的区别

  •  
  •  
  • 
<body>
 　<form id="form1" runat="server">
 　　　<li id="liOne" onclick="alert('我是最外层');">
 　　　　　<li id="liTwo" onclick="alert('我是中间层！')">
 　　　　　　　<a id="hr_three" href="http://www.studyofnet.com" mce_href="http://www.studyofnet.com"onclick="alert('我是最里层！')">点击我</a>
 　　　　　</li>
 　　　</li>
 　</form>
</body>

    •  

    1、event.stopPropagation()

  •  
  • 
        $(function() {
            $("#hr_three").click(function(event) {
                event.stopPropagation();
            });
        });

		
    • 

    
	点击“点击我”，会弹出：我是最里层，然后跳转到 开心学习(http://www.studyofnet.com)页面。
    

    
	 
    

    
	2、return false
    

    

  • 
	
  • 
		
  • 
			 
    • 
	
	
  • 
		
  • 
			
    
$(function() {
　　$("#hr_three").click(function(event) {
　　　　return false;
　　});
});

		
    • 
	


    
	点击“点击我”，会弹出：我是最里层，但不会执行链接到 开心学习(http://www.studyofnet.com)页面。
    

    
	 
    

    
	3、event.preventDefault()
    

  • 
	
  • 
		
  • 
			 
    • 
	
	
  • 
		
  • 
			
    
$(function() {
   $("#hr_three").click(function(event) {
      event.preventDefault();
   });
});

		
    • 
	


    
	点击“点击我”，会依次弹出：我是最里层---->我是中间层---->我是最外层，但不会执行链接到 开心学习(http://www.studyofnet.com)页面。
    

    
	 
    
 
    
  
    标签：javascript   
    
 
    
 
    

    

    
              
  • 上一篇：.NET中IsNullOrEmpty和IsNullOrWhiteSpace的区别
    •                 	  
			  
  • 下一篇：SQL Server中SQL语句或者存储过程的最大长度
    • 

  
     


    
  
    
      您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利