输入的事件冒泡与标记的不同行为？

Question

我刚刚意识到<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> tags事件没有冒泡出来？我是不是漏掉了什么？

这是一个演示的fiddle。取消注释<a>并注释<input>，然后单击它以查看差异。

代码借用自this question中Jason的答案。

Answer 1

问题出在下面这一行：

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

您正在询问jQuery事件目标是"a“标记还是具有".ui-dialog”类的元素。删除选择器中的"a“标记，如下所示，它应该按您所希望的那样工作。

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

以下是修改后的fiddle http://jsfiddle.net/PRQNY/1/

附言:只是为了确认你对事件的理解。无论标准DOM事件模型中的元素标记如何，所有事件都会冒泡。

Answer 2

这一行导致if语句为false，因此您看不到if语句中的alert。

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

事件目标是a，因为您在事件已经冒泡的情况下也单击了它。