js 阻止事件冒泡和默認行為 preventDefault、stopPropagation、return false

preventDefault：

preventDefault它是事件對象(Event)的一個方法，作用是取消一個目標元素的默認行為。既然是說默認行為，當然是元素必須有默認行為才能被取消，如果元素本身就沒有默認行為，調用當然就無效了。什么元素有默認行為呢？如鏈接<a>，提交按鈕<input type=”submit”>等。當Event對象的cancelable為false時，表示沒有默認行為，這時即使有默認行為，調用 preventDefault也是不會起作用的。

我們都知道，鏈接<a>的默認動作就是跳轉到指定頁面，下面就以它為例，阻止它的跳轉：

//假定有鏈接 <a href="http://www.cnf2e.com/" id="testA" >cnf2e</a>

var a = document.getElementById("testA"); a.onclick =function(event){
//阻止默認行為 event.preventDefault(); }

stopPropagation：

stopPropagation也是事件對象(Event)的一個方法，作用是阻止目標元素的冒泡事件，但是會不阻止默認行為。什么是冒泡事件？如 在一個按鈕是綁定一個”click”事件，那么”click”事件會依次在它的父級元素中被觸發 。stopPropagation就是阻止目標元素的事件冒泡到父級元素。如：

<div id='div' onclick='alert("div");'>

   <ul onclick='alert("ul");'>

      <li onclick='alert("li");'>test</li>

   </ul>

</div>

上面的代碼，我們單擊test時，會依次觸發alert(“li”),alert(“ul”),alert(“div”)，這就是事件冒泡。

當我們需要阻止冒泡時，就得使用stopPropagation了

<div id='div' onclick='alert("div");' >

   <ul onclick='alert("ul");'>

      <li id='ul-a' onclick='alert("li");event.stopPropagation()'>a</li>

   </ul>

</div>

這時單擊”test”，只會提示alert(‘li’);

return false：

現在很多js代碼都直接使用jQuery來寫，在jQuery中使用return false時，相當於同時使用event.preventDefault和event.stopPropagation，它會阻止冒泡也會阻止默認行為。 但是使用原生js寫時，return false只會阻止默認行為。下面兩段代碼說明

使用原生js方法時，return false只能阻止默認行為，但卻不能阻止冒泡

<div id='div' onclick='alert("div");'>

    <ul onclick='alert("ul");'>

        <li id='ul-a' onclick='alert("li");'><a href="http://www.cnf2e.com" id="testB">cnf2e.com</a></li>

    </ul>

</div> var a = document.getElementById("testB"); a.onclick = function(){ return false; };

使用jQuery方法時，return false會阻止默認行為，也會阻止冒泡

<div id='div' onclick='alert("div");'>

<ul onclick='alert("ul");'>

<li id='ul-a' onclick='alert("li");'><a href="http://www.cnf2e.com" id="testC">cnf2e.com</a></li>

</ul>

</div> $("#testC").on('click',function(){ return false; });

原文鏈接：http://www.cnblogs.com/w158357686/p/4380472.html