我正在尝试使用jQuery监听器来监听用户对html主体的点击并执行特定功能,如果已经点击了身体上的任何位置,除了特定div和该div中的子项.
我们的想法是div是一个弹出式元素,而不是必须有一个用户可以点击的关闭按钮,他们应该只能点击除该div之外的页面上的任何地方,它将自动关闭.
我一直在使用这个监听器：
var initialClick = false;
$('body').on('click.addPhoneListeners',function(event) {
var target = EventUtility.getTarget(event);
if(initialClick) {
if(target.parentNode.id != clone.id && target.id != '') {
finish();
};
}
initialClick = true;
});
它会监听正文上的所有点击,除非点击来自我希望用户能够与之交互的元素,否则它会关闭.不幸的是,这仅适用于只有一级孩子的div.一旦我开始获得多个层次结构,例如：
<div id="addressContainer">
<div id="address" class="hidden row">
<div class="row">
<div id="address.primary" class="hidden">P</div>
<div id="address.type"></div>
<div id="address.street"></div>
<div id="address.editButton" class="hidden"><a id="addressEditButton">Edit</a></div>
<div id="address.deleteButton" class="hidden"><a id="addressDeleteButton">Delete</a></div>
</div>
<div class="row">
<div id="address.city"></div>
<div id="address.state"></div>
<div id="address.zip"></div>
</div>
<input type="hidden" id="address.id"></input>
</div>
</div>
target.parentNode.id为我提供了对象父元素而不是addressContainer id,因此不起作用.是否在嵌套元素中使用顶级父级？其他元素将使用相同的代码,因此它必须处理两个div只有一个级别和div有多个.
更新：发现一些优秀的解决方案,谢谢你们.但我有另外一个问题.请参阅上面的代码,我将initialClick布尔值设置为false,然后将其设置为true.我这样做是因为出于某种原因,如果我不这样做,当我去添加弹出DIV,从用于设置弹出按钮的第一次点击触发听者并关闭弹出之前,我有机会做任何事情.这是我解决问题的方法,但这是唯一的方法吗？或者我只是设置听众略有错误？
解决方法
我通常做这样的事情：
$(document).click(function(e) {
// hide popup
});
$('#popup_div').click(function(e) {
e.stopPropagation();
});
这样,弹出窗口中的点击从不传播到文档,因此close函数永远不会触发.
