事件冒泡,舉個列子:
<li> <a href='http://hovertree.com/'>點擊a</a> </li> <script> $('li').click(function () { alert('點擊了li'); }); $('a').click(function () { alert('點擊了a'); }); </script>
當你點擊a的時候,會先彈出‘點擊了a’,再彈出‘點擊了li’,最後跳轉到百度。簡單理解就是先執行子元素的事件,再執行父元素的事件,跟事件捕獲相反。
有些時候,我們不希望發生父元素的事件,只發生子元素的事件,這時候就需要阻止事件冒泡。有一下幾個方法,分別分析一下:
1、event.stopPropagation();
2、event.cancelBubble = true;
3、event.preventDefault();
4、return false;
一、event.stopPropagation();
<script> $('li').click(function () { alert('點擊了li'); }); $('a').click(function (event) { alert('點擊了a'); event.stopPropagation(); }); </script>
完美阻止了li元素的冒泡,並且不會影響a的事件。效果是:先彈出‘點擊了a’,然後跳轉百度
注:之前看到說是不兼容IE8及一下,親測IE6以上沒問題,如有錯,望指出。
二、event.cancelBubble = true;
<script> $('li').click(function () { alert('點擊了li'); }); $('a').click(function () { alert('點擊了a'); console.log(event); event.cancelBubble = true; }); </script>
使用cancelBubble需要注意:
event事件是窗口的MouseEvent,此處console.log打印的是:MouseEvent {isTrusted: true, screenX: 55, screenY: 90, clientX: 55, clientY: 29…},
所以不在點擊事件裡面傳event。(不要這樣:$('a').click(function(event){});)。效果跟上面的是一樣:先彈出‘點擊了a’,然後跳轉百度。剛剛測的時候,好像兼容性也還好。
三、event.preventDefault();
<script> $('li').click(function () { alert('點擊了li'); }); $('a').click(function (event) { alert('點擊了a'); event.preventDefault(); }); </script>
執行後的效果:先彈出‘點擊了a’,再彈出‘點擊了li’,但是,不執行跳轉!不執行跳轉!不執行跳轉!
其實,default英文意思是默認的,想想不難理解,頁面中,除了執行監聽事件還會觸發浏覽器默認動作; 執行監聽事件在前, 觸發浏覽器默認動作在後。
preventDefault准確來說並不是阻止事件冒泡,只是阻止浏覽器的默認動作。而stopPropagation跟cancelBubble只是阻止事件冒泡,並沒有阻止
浏覽器的默認動作。當我們希望阻止事件冒泡的同時,也阻止浏覽器的默認動作時,就可以2者都一起使用,如下代碼:
<script> $('li').click(function () { alert('點擊了li'); }); $('a').click(function (event) { alert('點擊了a'); console.log(event); event.stopPropagation(); event.preventDefault(); }); </script>
效果是:只彈出‘點擊了a’,並不跳轉百度鏈接,也不彈出‘點擊了li’。
(注:最好使用stopPropagation,避免preventDefault跟cancelBubble的event的對象不一致);
四、最後的一個return false;
<script> $('li').click(function () { alert('點擊了li'); }); $('a').click(function () { alert('點擊了a'); return false; }); </script>
執行效果:只彈出‘點擊了a’,並不跳轉百度鏈接,也不彈出‘點擊了li’。跟(stopPropagation+preventDefault)是一個效果。
退出執行, return false
之後的所有觸發事件和動作都不會被執行. 有時候 return false
可以用來替代stopPropagation()
和
preventDefault()
, 比如上面的例子。
值得注意的一點:有人認為 return false
= stopPropagation()
+ preventDefault()
,其實是錯的。 return false
不但阻止事件,
還可以返回對象, 跳出循環等... 方便地一刀切而不夠靈活, 濫用易出錯。
貼一下本博客的html的代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> </head> <body> <ul> <li> <a href='#'>點擊a</a> </li> </ul> <script src="jquery-1.11.3.min.js"></script> <script> $('li').click(function () { alert('點擊了li'); }); $('a').click(function (event) { alert('點擊了a'); console.log(event); event.stopPropagation(); // event.cancelBubble = true; event.preventDefault(); // return false; }); </script> </body> </html>