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)页面。

    标签: