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>，则click事件不会传播到文档。如果使用<input>，则会将click事件冒泡到文档，然后单击输入将直接关闭对话框。我知道这可以通过stopPropagation来处理。问题是为什么<a>标签事件没有冒泡？我错过了什么吗？

这是一个fiddle来演示。取消注释<a>并对<input>发表评论，然后点击它以查看差异。

代码借鉴了Jason在this question中的回答。

Answer 1

问题在于这一行：

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

你问jQuery，如果事件目标是＆＃34; a＆＃34;标签或带有类＃34; .ui-dialog＆＃34;的元素。删除＆＃34; a＆＃34;选择器中的标记如下所示，它应该按照您的意愿工作。

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

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

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

Answer 2

此行导致if语句为false，因此您无法看到if语句中的alert。

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

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

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

2 个答案: