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元素點擊事件的輸出內容。
jquery中return false等效於同時調用e.preventDefault()和e.stopPropagation();
return false除了阻止默認行爲以外,還會阻止事件冒泡。若是手上有一份jquery源代碼的話,可查看其中有以下代碼:
1 if(ret===false){ 2 event.preventDefault(); 3 event.stopPropagation(); 4 }
以上就是我對preventDefault與stopPropagation的瞭解,有不少的不足,請你們多多指出,多多留言,謝謝!!!