如果我在div内单击，如何使用javascript/jquery进行检查？（我在这里做了研究，我需要更好的）

如何检查页面上的点击是否在某个

内

我有一个嵌套子元素的

，所以

$（“div”）.click（）技术不起作用，因为单击其中的其他元素不会触发任何东西

我需要的是：我点击页面上的一个元素，然后显示另一个更复杂的
。当我在
之外单击时，需要将其隐藏

这看起来很简单，但我已经几个小时没能解决它了

我不能使用焦点/模糊，因为它勾勒出元素的轮廓

我需要的是：我点击1个元素，在这个例子中是一个链接，然后给它分配一个类。然后，我将相同的类放在链接的父级上。这是因为我需要显示哪个
是链接的同级

在我的CSS中，我有一些类似于
parent.class{mydiv{display:block；}}}）

当我点击页面上的其他地方时，我需要删除这些类。问题是，当我在显示的
中单击时，我的函数认为我单击了页面上的某个位置并删除了类。
可能其他元素正在拦截单击，这应该可以工作：

$('#div_id, #div_id *').click(function(e) {
  // ... clicked somewhere inside the div
}

您可能正在寻找的是事件冒泡。当单击HTML页面上的某个元素时，它会得到一个事件，但它的所有祖先也会得到一个事件。通常每个元件可决定阻断信号

下面是如何让家长在单击孩子时执行操作的概述：

在你的情况下，你可以把你的点击处理器放在你的“按钮”上，并且隐藏在“细节”div的祖先上的隐藏处理器，它覆盖了你认为合适的页面上的所有额外的空间来删除它。
 可能需要的是“模糊”事件。
The blur event is sent to an element when it loses focus. Originally, 
this event was only applicable to form elements, such as <input>. 
In recent browsers, the domain of the event has been extended to 
include all element types. An element can lose focus via keyboard 
commands, such as the Tab key, or by mouse clicks elsewhere on the page.

当某个元素失去焦点时，模糊事件将被发送到该元素。原来，
此事件仅适用于表单元素，例如。
在最近的浏览器中，事件的域已扩展到
包括所有元素类型。元素可以通过键盘失去焦点
命令，如Tab键，或通过鼠标单击页面上的其他位置。
使用delegate（）为您的子对象集查看父选择器。条件可以是你想要的任何东西

$("div.wrapper").delegate("a, span.link", "click", function(event){
    event.preventDefault();
    if($(this).hasClass("link")){
        //Do span.link stuff
    }else{
        //do default link stuff
    }
});

我认为最好的办法是为页面设置一个点击处理程序，并在页面启动时向上移动

  $(document).click(function(e) {

    var d = e.target;

    // if this node is not the one we want, move up the dom tree
    while (d != null && d['id'] != 'myDiv') {
      d = d.parentNode;
    }

    // at this point we have found our containing div or we are out of parent nodes
    var insideMyDiv = (d != null && d['id'] == 'myDiv');
  });

那么基本的菜单式交互

<a href="#" id="open">Open</a>
<div id="menu" style="display:none;"> ... </div>

请记住，如果页面中的其他地方有一个链接
返回false
在
单击处理程序中，事件传播停止，此事件处理程序将不会运行

您也可以只使用任何模式对话框插件；许多人都可以选择单击覆盖
div
关闭对话框。
我可能误解了您试图实现的目标，但类似这样的事情如何：

我使用一些内部元素设置了一个click事件，并且使用eventObject可以确定在外部元素中单击了什么。然后，您可以向trigger元素和outside元素添加/删除类。
我想您要查找的是
event.stopPropagation（）


$（文档）。在（'单击'，'淋浴'上，函数（事件）{
event.stopPropagation（）；
$（“#更复杂”）.show（）；
});
$（文档）。在（'单击'，'正文'，函数（）上）{
$（“#更复杂”）.hide（）；
});
单击此div或正文中的任何其他元素将隐藏复杂div

单击以显示复杂div

更复杂的div

这是低效的，因为它将一个单独的处理程序绑定到每个包含的元素。这个问题的目的非常零散。你能试着澄清你的意图吗？试着坚持一个问题。非常感谢，这很有魅力！问题是，如果我有一个巨大的DOM树，这会使页面速度降低多少。我们拭目以待。但就目前而言，它是有效的：）
$('#open').click(function(e) {
    e.preventDefault();
    var m = $('#menu').show();
    $(document).on('click.mnu', function(e) {
        if (m[0] === e.target || m.has(e.target).length > 0) {
            e.preventDefault();
            m.hide();
            $(document).off('.mnu');
        }
    }
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript">
$(document).on('click','#shower', function(event){
    event.stopPropagation();
    $('#moreComplex').show();
});
$(document).on('click','body', function(){
    $('#moreComplex').hide();
});
</script>

<div id="hider">
    <p>Clicking on this div or on any other element in the body will hide Complex div</p>
    <div id="shower">
        <p>Click to show Complex div</p>
    </div>
</div>
<div id="moreComplex" style="display:none">
    <p>More Complex div</p>
</div>