2012年1月19日 星期四

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

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


我們希望下面那個方塊在點下click me後出現,再點一次後消失,可以這樣寫:
  1. $("#clickMe").toggle(function(){   
  2.     $("#box").show();   
  3. },function(){   
  4.     $("#box").hide();   
  5. });  

可是我們又希望按了網頁其他地方,方塊就會不見。
  1. $("body").click(function(){   
  2.     $("#box").hide();   
  3. });  

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

解決的方法很簡單,只要你知道DOM的氣泡事件原理,你只要避免氣泡事件上浮就可以了,於是我們這樣寫。
  1. $("#clickMe").click(function(e){   
  2.     e.stopPropagation();   
  3. });  
這樣就可以更明確指定讓事件發生在特定元素上。

此外如果你想在預設行為觸發之前就終止事件,可以使用.preventDefault,比如想避免連結打開URL
  1. $("a").click(function(e){   
  2.     e.preventDefault();   
  3. });  
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...