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

 

js 阻止事件冒泡和預設行為 preventDefault、stopPropagation、return false