使用JQuery来监听html body上的所有点击除了特定的div及其子项 [英] Use JQuery to listen for all clicks on the html body Except a specific div and its children

问题描述

我试图使用jQuery监听器来监听用户在html主体上的点击，并且在单击主体上的任何位置（除了特定的div和该div内的子项）之后执行特定的功能。

这个想法是div是一个弹出式元素，而不必有一个关闭按钮，用户可以点击，他们应该只需点击任何地方就可以

我一直在使用这个监听器：

  var initialClick = false; $（'body'）。on（'click.addPhoneListeners'，function（event）{
 var target = EventUtility.getTarget（event）; 
 if（initialClick）{$ b $如果（target.parentNode.id！= clone.id&& target.id！=''）{
 finish（）; 
}; 
} 
 initialClick = true; 
}）; 
  

它监听所有的点击，除非点击来自元素内我希望用户能够互动，它关闭。不幸的是，这只适用于只有一个孩子级别的div。只要我开始得到如下这样的多个层次结构：

 < div id =addressContainer> 
< div id =addressclass =hidden row> 
< div class =row> 
< div id =address.primaryclass =hidden> P< / div> 
< div id =address.type>< / div> 
< div id =address.street>< / div> 
< div id =address.editButtonclass =hidden>< a id =addressEditButton>编辑< / a>< / div> 
< div id =address.deleteButtonclass =hidden>< a id =addressDeleteButton>删除< / a>< / div> 
< / div> 
< div class =row> 
< div id =address.city>< / div> 
< div id =address.state>< / div> 
< div id =address.zip>< / div> 
< / div> 
< input type =hiddenid =address.id>< / input> 
< / div> 
< / div> 
  

target.parentNode.id给我对象的父元素，而不是addressContainer id，不行。是否使用嵌套元素中的顶层父元素？其他元素将使用这个相同的代码，所以它必须在两个div上工作，只有一个级别和div的多个。

更新：找到一些优秀的解决方案，谢谢家伙。然而，我确实有另外一个问题。参考我上面的代码，我将initialClick boolean设置为false，然后将其设置为true。我这样做是因为由于某种原因，如果我不这样做，当我去添加弹出div时，用于设置该弹出窗口的按钮的初始点击会触发侦听器，并在我有机会做任何事情之前关闭弹出窗口。这是我解决问题的方法，但这是唯一的方法吗？或者我只是设置听众稍微不正确？

解决方案

我通常会这样做：

  $（document）.click（function（e）{
 //隐藏弹出
}）; 
 
 $（'＃popup_div'）。click（function（e）{
 e.stopPropagation（）; 
}）; 
  

通过这种方式，弹出窗口中的点击从不会传播到文档，因此close函数不会触发。 / p>

I am trying to use a jQuery listener to listen for a users clicks on the html body and perform a specific function if anywhere on the body has been clicked except for a specific div and the children within that div.

The idea is that the div is a popup type element and instead of having to have a close button that the user can click, they should just be able to click anywhere on the page besides that div and it will automatically close.

I have been using this listener:

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;
});

Which listens for all clicks on the body and unless the click comes from within the element I want the user to be able to interact with, it closes. Unfortunately this only works with a div that has only one level of children. As soon as I start getting multiple hierarchies such as this:

<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>

The target.parentNode.id gives me the objects parent element as opposed to the addressContainer id and thus does not work. Is use the top level parent from within nested elements? Other elements will be using this same code, so it has to work on both divs with just one level and div's with multiple.

UPDATE: Found a few excellent solutions, thanks guys. I do however have one other question. Refer to my code above where I set an initialClick boolean to false, then set it to true. I am doing this because for some reason if I don't, when I go to add the popup div, the initial click from the button used to set that popup fires the listener and closes the popup before I have a chance to do anything. This has been my solution around the problem, but is that the only way? Or am I just setting the listener slightly incorrect?

解决方案

I usually do something like this:

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

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

That way the clicks from your popup never propagate to the document, so the close function never fires.

这篇关于使用JQuery来监听html body上的所有点击除了特定的div及其子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！