1

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

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

从 Jason 在这个问题的答案中借用的代码。

4

2 回答 2

1

问题出在这一行：

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

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

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

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

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

于 2012-12-05T11:08:49.963 回答
0

此行导致 if 语句为假，因此您看不到 if 语句内的警报。

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

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

于 2012-12-05T11:12:37.087 回答