javascript – 使用JQuery监听html正文上的所有点击除了特定的div及其子节点

我正在尝试使用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函数永远不会触发.

javascript – 使用JQuery监听html正文上的所有点击除了特定的div及其子节点

解决方法

猜你在找的jQuery相关文章