jQuery-防止事件上浮-stopPropagation()

寫jQuery(javascript)的話可能或多或少都有遇過這樣的問題，先看以下這個結構。
<div id="clickMe">Click Me</div>
<div id="box"></div>
給他樣式後。


我們希望下面那個方塊在點下click me後出現，再點一次後消失，可以這樣寫：

view plaincopy to clipboardprint?

1. $("#clickMe").toggle(function(){   
2.     $("#box").show();   
3. },function(){   
4.     $("#box").hide();   
5. });  

可是我們又希望按了網頁其他地方,方塊就會不見。

view plaincopy to clipboardprint?

1. $("body").click(function(){   
2.     $("#box").hide();   
3. });  

這樣的話，toggle就會出問題，於是我們改成在點click me的時候判斷box看不看的到再作動作，但當我們改完後，會發現點了click me後方塊會馬上不見，那是因為javascript的事件會上浮，也就是我們點到#clickMe，可是也會點到外層的body，所以會先執行綁在#clickMe的事件，接著會執行綁在外層body的事件，所以就沒辦法依照我們的想法去做了。

解決的方法很簡單，只要你知道DOM的氣泡事件原理，你只要避免氣泡事件上浮就可以了，於是我們這樣寫。

view plaincopy to clipboardprint?

1. $("#clickMe").click(function(e){   
2.     e.stopPropagation();   
3. });  

這樣就可以更明確指定讓事件發生在特定元素上。

此外如果你想在預設行為觸發之前就終止事件，可以使用.preventDefault，比如想避免連結打開URL

view plaincopy to clipboardprint?

1. $("a").click(function(e){   
2.     e.preventDefault();   
3. });