輸入與標籤不同的事件冒泡行爲？

我剛剛意識到<a>和<input>標記存在不同的行爲。輸入與標籤不同的事件冒泡行爲？

<div id="dialog">Your non-modal dialog</div> 

<!--<a href="#" id="open">Open dialog</a>--> 
<input id="open" value="Open dialog">

$('#open').click(function() { 
    $('#dialog').dialog('open'); 
}); 

$('#dialog').dialog({ 
    autoOpen: false, 
    modal: false 
}); 

// Close Pop-in If the user clicks anywhere else on the page 
jQuery('html') //set for html for jsfiddle, but should be 'body' 
    .bind('click', function(e){ 
     if (jQuery('#dialog').dialog('isOpen') 
      && !jQuery(e.target).is('.ui-dialog, a') 
      && !jQuery(e.target).closest('.ui-dialog').length) 
     { 
      jQuery('#dialog').dialog('close'); 
      alert("close_dialog"); 
     } 
    } 
);

如果使用<a>，單擊事件不會傳播到文件。如果使用<input>，則單擊事件將冒泡到文檔中，並且直接單擊輸入以關閉該對話框。我知道這可以用stopPropagation來處理。問題是爲什麼<a>標籤事件不起泡？我錯過了什麼嗎？

這裏是一個fiddle來演示。取消註釋<a>並評論<input>，然後單擊它以查看差異。

在Jason的回答中借用的代碼this question。

來源

2012-12-05 Hendry H.

問題就在這條線：

&& !jQuery(e.target).is('.ui-dialog, a')

你問jQuery的，如果事件目標是一個「一」的標籤或者帶班「的.ui-對話」的元素。按如下方式去除選擇器中的「a」標籤，它應該按照您的要求工作。

&& !jQuery(e.target).is('.ui-dialog')

下面是修改後的小提琴http://jsfiddle.net/PRQNY/1/

P.S：只是爲了確認您的活動的理解。無論標準DOM事件模型中的元素標記如何，所有事件都會冒泡。

來源

2012-12-05 11:08:49

好吧，明白了。 '無論元素標籤'，是的，我明白，這就是爲什麼我感到奇怪，首先提出這個問題。非常感謝你。 –

很高興幫助！ :) –

此行導致if語句爲false，因此您無法看到if語句內部的alert。

&& !jQuery(e.target).is('.ui-dialog, a')

事件目標是a因爲你點擊它，即使該事件已冒泡。

來源

2012-12-05 11:12:37 Dharman

輸入與標籤不同的事件冒泡行爲？

回答

相關問題