Javascript 使用JQuery来侦听除特定div及其子项之外的所有对html主体的单击

我试图使用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>

P
编辑
删除

target.parentNode.id为我提供了对象父元素，而不是addressContainer id，因此不起作用。是否从嵌套元素中使用顶级父级？其他元素将使用相同的代码，因此它必须同时处理具有一个级别的div和具有多个级别的div

更新：找到了一些很好的解决方案，谢谢大家。不过，我还有一个问题。参考上面的代码，我将initialClick布尔值设置为false，然后将其设置为true。我之所以这样做是因为，出于某种原因，如果我不这样做，当我去添加popup div时，用于设置该弹出窗口的按钮的初始单击会触发侦听器并在我有机会做任何事情之前关闭弹出窗口。这是我解决问题的办法，但这是唯一的办法吗？或者我只是将侦听器设置得有点不正确？

替换

if(target.parentNode.id != clone.id)

与

（我把第二条放在一边，因为它似乎与你的问题无关。）

这将尝试查找ID等于

clone.ID

的最近祖先。如果没有找到，则返回一个空的jQuery对象（即

长度===0

），这就是我们测试的对象

---

---

顺便说一句：jQuery规范化了

event.target

，因此您可以直接使用它，而不是使用任何自定义的畸形

EventUtility.getTarget（event）

体现的东西。

我通常会这样做：

$(document).click(function(e) {
  // hide popup
});

$('#popup_div').click(function(e) {
  e.stopPropagation();
});

---

这样，弹出窗口中的点击就不会传播到文档中，因此关闭功能也不会启动。

这两种解决方案都有效，但我非常喜欢这一种。朴素典雅。我还有一个相关的问题。请参考我的最新问题。这与被强迫去聆听最初的点击有关。如果我不这样做，div会立即消失。@ryandlf如果你有一个新问题，你应该作为一个新问题提问。@ryandlf只要确保在显示div的按钮上停止传播即可；任何不应将其事件冒泡到身体的元素都需要停止。

$(document).click(function(e) {
  // hide popup
});

$('#popup_div').click(function(e) {
  e.stopPropagation();
});