js中的preventDefault與stopPropagation詳解_javascript技巧

首先講解一下js中preventDefault和stopPropagation兩個方法的區別：
preventDefault方法的起什麼作用呢？我們知道例如百度,這是html中最基礎的東西，起的作用就是點擊百度連結到http://www.baidu. com,這是屬於標籤的預設行為，而preventDefault方法就是可以阻止它的預設行為的發生而發生其他的事情。看一段程式碼大家就懂了：

複製程式碼 程式碼如下:

百度

此時點擊百度鏈接，不會點擊百度鏈接，不會點擊百度鏈接開啟http://www.baidu.com，而只是跳出alert對話框。

preventDefault方法講解到這裡，stopPropagation方法呢？講stopPropagation方法之前必先跟大家講解一下js的事件代理程式。

事件代理程式用到了兩個在JavaSciprt事件中常被忽略的特性：事件冒泡以及目標元素。當一個元素上的事件被觸發的時候，比如說滑鼠點擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發。這個過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。對任何一個事件來說，其目標元素都是原始元素，在我們的這個例子中也就是按鈕。目標元素它在我們的事件物件中以屬性的形式出現。使用事件代理的話我們可以把事件處理器加到一個元素上，等待事件從它的子級元素裡冒泡上來，並且可以很方便地判斷出這個事件是從哪個元素開始的。

stopPropagation方法就是起到阻止js事件冒泡的作用，看一段程式碼。

複製程式碼 程式碼如下:

<script><BR>function doSomething (obj,evt) {<BR> alert(obj.id);<BR> var e=(evt)?evt:window.event;<BR> if (window.event) {<BR>  e.cancelBubble=true;// ie下阻止冒泡<BR> } else {<BR>  //e.preventDefault();<BR>  e.stopPropagation();// 其它瀏覽器下阻止冒泡<BR> }<BR>}<BR></script>
 }
}

 This is parent1 div.
 

 

This is child1.

 

 

This is parent1 div.

 

This is parent2 div.

 

 

This is child2. Will bubble.

 

 

This is parent2 div.

大家運行一下上面的程式碼就明白了。