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;

});