首頁  >  文章  >  web前端  >  js中的preventDefault與stopPropagation詳解_javascript技巧

js中的preventDefault與stopPropagation詳解_javascript技巧

WBOY
WBOY原創
2016-05-16 17:01:381190瀏覽

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

複製程式碼 程式碼如下:





JS阻止連結跳轉


百度




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

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

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

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


複製程式碼 程式碼如下:




阻止JS事件冒泡傳遞(cancelBubble 、stopPropagation )

<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.

大家運行一下上面的程式碼就明白了。
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn