stopImmediatePropagation&stopPropagation 區別

stopImmediatePropagation 與 stopPropagation 不一樣之處 請仔細查看加粗的文字並結合圖例理解。

stopImmediatePropagation 防止對事件流中當前節點中和全部後續節點中的事件偵聽器進行處理。此方法會當即生效，而且會影響當前節點中的事件偵聽器。

stopPropagation 防止對事件流中當前節點的後續節點中的全部事件偵聽器進行處理。此方法不會影響當前節點 (currentTarget) 中的任何事件偵聽器。

下面是以前項目中的一個對於這種問題的出錯的例子。

js代碼以下：

<!-- lang: js -->

/模擬瀏覽器自帶的select效果/
$(function(){ $(".select").live('click',function(event){ var s=$(this); var z=parseInt(s.css("z-index")); var dt=$(this).find("dt"); var dd=$(this).find("dd"); var _show=function(){dd.slideDown(200);s.css("z-index",z+1);}; //展開效果 var _hide=function(){dd.slideUp(200);s.css("z-index",z);}; //關閉效果 var target = event.target; /2014-6-25 修復/ if(target.nodeName == 'DT' || $(target).parent().is('dt') ){ if($(this).find("dd").is(":hidden") && $(this).find("li").length){ _show(); /2014-10-8 17:34:23 修復，以前使用event.stopPropagation();/ event.stopImmediatePropagation(); }else{ _hide(); } } dd.find("a").click(function(event){ event.stopPropagation(); var html = $(this).html(), value = $(this).data("value"); dt.html(html); s.find('input:hidden').val(value); // 添加隱藏按鈕控制 _hide(); }); //選擇效果（如須要傳值，可自定義參數，在此處返回對應的「value」值 ） $("body").click(function(i){ !$(i.target).parents(".select").first().is(s) ? _hide():"";}); }); });

html代碼以下：

<!-- lang: css -->
<dl class="select width80">
									<dt>結束月份</dt>
									<dd>
										<ul class="J_month">
											<li>
												<a href="javascript:;" data-value="至今">至今</a>
											</li>
										</ul>
										<input type="hidden" name="endMonth" />
									</dd>
								</dl>