js中的preventDefault與stopPropagation詳解_javascript技巧-js教程-PHP中文網

js中的preventDefault與stopPropagation詳解_javascript技巧

WBOY

發布： 2016-05-16 17:01:38

原創

1207 人瀏覽過

首先講解一下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> function doSomething (obj,evt) { alert(obj.id); var e=(evt)?evt:window.event; if (window.event) { e.cancelBubble=true;// ie下阻止冒泡 } else { //e.preventDefault(); e.stopPropagation();// 其它瀏覽器下阻止冒泡 } } </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.

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