深刻了解preventDefault與stopPropagation

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

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

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

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

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

例子:對象

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

 

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

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

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

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

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元素點擊事件的輸出內容。

 

jqueryreturn false等效於同時調用e.preventDefault()和e.stopPropagation();

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

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

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

相關文章
相關標籤/搜索