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

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>标签事件没有冒泡？我错过了什么吗？

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

从 this question 中 Jason 的回答中借用的代码。

Answer 1

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

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

事件目标是a，因为您点击了它，即使事件已冒泡。

Answer 2

问题出在这一行：

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

您正在询问 jQuery，事件目标是“a”标签还是具有“.ui-dialog”类的元素。如下删除选择器中的“a”标签，它应该可以按照您的意愿工作。

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

这是修改后的小提琴http://jsfiddle.net/PRQNY/1/

P.S：只是为了确认您对事件的理解。无论标准 DOM 事件模型中的元素标签如何，所有事件都会冒泡。