深刻了解preventDefault與stopPropagation

event.preventDefault()用法介紹（阻止默認事件）

該方法將通知 Web 瀏覽器不要執行與事件關聯的默認動做（若是存在這樣的動做）。例如，若是 type 屬性是 "submit"，在事件傳播的任意階段能夠調用任意的事件句柄，經過調用該方法，能夠阻止提交表單。注意，若是 Event 對象的 cancelable 屬性是 fasle，那麼就沒有默認動做，或者不能阻止默認動做。不管哪一種狀況，調用該方法都沒有做用。

該方法將通知 Web 瀏覽器不要執行與事件關聯的默認動做（若是存在這樣的動做）。

例如，若是 type 屬性是 "submit"，在事件傳播的任意階段能夠調用任意的事件句柄，經過調用該方法，能夠阻止提交表單。

注意，若是 Event 對象的 cancelable 屬性是 fasle，那麼就沒有默認動做，或者不能阻止默認動做。不管哪一種狀況，調用該方法都沒有做用。

例子：

1 $("a").click(function (e) {
2         alert("默認行爲被禁止嘍");
3         e.preventDefault();
4     });
5  
6 <a href="http://www.baidu.com">測試</a>

 

event.stopPropagation()用法介紹（阻止冒泡）

該方法將中止事件的傳播，阻止它被分派到其餘 Document 節點。在事件傳播的任何階段均可以調用它。注意，雖然該方法不能阻止同一個 Document 節點上的其餘事件句柄被調用，可是它能夠阻止把事件分派到其餘節點

該方法將中止事件的傳播，阻止它被分派到其餘 Document 節點。在事件傳播的任何階段均可以調用它。

注意:雖然該方法不能阻止同一個 Document 節點上的其餘事件句柄被調用，可是它能夠阻止把事件分派到其餘節點。

event是DOM的事件方法，因此不是單獨使用，好比指定DOM

 1 <div id="A">
 2     <div id="B">
 3     </div>
 4 </div>
 5 <script>
 6     var a = document.getElementById('A'),
 7     b = document.getElementById('B');
 8     function handlera (e) {
 9         console.log(e.target);
10     }
11     function handler (e) {
12         console.log(e.target);
13         e.stopPropagation();
14     }
15 b.addEventListener('click', handler, false);
16 a.addEventListener('click', handlera, false);
17 </script>

點擊B，輸出：

1 <div id="B"></div>

 1 <div id="A">
 2     <div id="B">
 3     </div>
 4 </div>
 5 <script>
 6 var a = document.getElementById('A'),
 7     b = document.getElementById('B');
 8 function handlera (e) {
 9     console.log(e.target + 'a');
10 }
11 function handler (e) {
12     console.log(e.target + 'b');
13 }
14 b.addEventListener('click', handler, false);
15 a.addEventListener('click', handlera, false);
16 </script>

點擊B時，輸出：

1 [object HTMLDivElement]b
2 [object HTMLDivElement]a

以上例子，不難看出stopPropagation()功能就是阻止了冒泡，上面第二個例子中，沒有用這個方法阻止冒泡，當點擊子元素時，因爲事件冒泡，觸發了父元素的click事件，因此第二個例子中會多出現一次輸出內容，即爲：觸發A元素點擊事件的輸出內容。

 

jquery中return false等效於同時調用e.preventDefault()和e.stopPropagation()；

return false除了阻止默認行爲以外，還會阻止事件冒泡。若是手上有一份jquery源代碼的話，可查看其中有以下代碼：

1 if(ret===false){
2 　　  event.preventDefault();
3 　　  event.stopPropagation();
4 }

以上就是我對preventDefault與stopPropagation的瞭解，有不少的不足，請你們多多指出，多多留言，謝謝！！！