Javascript 单击外部div并关闭div，即使div不是父级的子级

我打开了两个div，它们属于同一类，但由于编程原因，无法连接。我简化了这里的代码，因为它有很多代码。这是最基本的

<div id="container">

  <div id="div1">
     <div> when I am clicked I will open div2 </div>
  </div>

  <div id="div2">
     <div> I can be clicked and all the div's stay open </div>
  </div>

</div> 

现在我想做的是，当我在

div1

外部单击时，它应该关闭

div1

当我点击

div1

时，它会打开

div2

当前，当我在

div2

中单击时，它会关闭

div1

，因为它不是

div1

的子对象。因此它应该保持

div2

打开

当我单击外部

div1

或

div2

时，它应该关闭两个div

如何组合这两个JavaScript代码以获得解释的行为

我试图完成的工作总结：

单击

div1

中的div将打开

div2

单击外部

div1

或

div2

将同时关闭

div1

和

div2

如果未单击内部的div

div1

，而单击外部

div1

，它应该关闭

div1

---

我建议使用jQuery编写以下代码：

$(document).on('click', function (e) {
    if ( e.currentTarget.id == 'div1' ) {
        $("#div2").show();
    } else if ( e.currentTarget.id == 'div2' ) {
        $("#div1").hide();
    } else {
        $("#div1").hide();
        $("#div2").hide();
    }
    return false;
});

或者在纯Javascript中：

function handleClicks(e) {
    var first = document.getElementById('div1'),
        second = document.getElementById('div2');
    if ( e.currentTarget.id == 'div1' ) {
        second.style.display = 'block';
    } else if ( e.currentTarget.id == 'div2' ) {
        first.style.display = 'none';
    } else {
        first.style.display = 'none';
        second.style.display = 'none';
    }
}
document.body.addEventListener('click', handleClicks, false);

---

还要检查那里的if-else语句。

我建议使用jQuery编写代码：

$(document).on('click', function (e) {
    if ( e.currentTarget.id == 'div1' ) {
        $("#div2").show();
    } else if ( e.currentTarget.id == 'div2' ) {
        $("#div1").hide();
    } else {
        $("#div1").hide();
        $("#div2").hide();
    }
    return false;
});

或者在纯Javascript中：

function handleClicks(e) {
    var first = document.getElementById('div1'),
        second = document.getElementById('div2');
    if ( e.currentTarget.id == 'div1' ) {
        second.style.display = 'block';
    } else if ( e.currentTarget.id == 'div2' ) {
        first.style.display = 'none';
    } else {
        first.style.display = 'none';
        second.style.display = 'none';
    }
}
document.body.addEventListener('click', handleClicks, false);

还要检查那里的if-else语句。

相当理论化

但要求相当明确。我会使用

.stopPropagation（）

来完成

e.target

是单击的元素。如果它是在同一事件上具有“并发处理程序”的元素的子元素，则将执行父元素的处理程序。除非您停止传播，您应该查看

在最顶端的父级上有一个说“全部隐藏”的处理程序，这将克服子级的处理程序说其他话的缺点。所以在这种情况下。。。从子级，您不希望单击（或mouseup…或任何事件）传播到顶级父级

简而言之：

.stopPropagation（）

将事件保留在相关元素上，您可以“不关心”来自父元素的任何并发处理程序

$（“#div1”）。在（“单击”上，函数（e）{
e、 停止传播（）；
whoAmI（e）；
$（“#div2”）.show（）；
});
$（“#div2”）。在（“单击”上，函数（e）{
e、 停止传播（）；
whoAmI（e）；
log（“我被点击了，#div1保持打开状态”）；
});
$（“#容器”）。在（“单击”上，函数（e）{
$（“#div1，#div2”）.hide（）；
whoAmI（e）；
});
函数whoAmI（e）{
console.clear（）；
console.log（“我是”+e.target.tagName+”+（（e.target.id==“”）？“子”：e.target.id））；
}

#容器{
高度：1000px；
}
#第1部分，第2部分{
边框：1px纯红；
填料：2米；
保证金：3em；
}
#第二组{
显示：无；
}
#容器>分区>分区{
边框：1px纯蓝色；
填充：0.5em；
边缘：1米；
}

当我被单击时，我将打开div2
我也这样做。
我可以被点击，所有部门都保持开放
我也这样做。
我也是！

理论性很强

但要求相当明确。我会使用

.stopPropagation（）

来完成

e.target

是单击的元素。如果它是在同一事件上具有“并发处理程序”的元素的子元素，则将执行父元素的处理程序。除非您停止传播，您应该查看

在最顶端的父级上有一个说“全部隐藏”的处理程序，这将克服子级的处理程序说其他话的缺点。所以在这种情况下。。。从子级，您不希望单击（或mouseup…或任何事件）传播到顶级父级

简而言之：

.stopPropagation（）

将事件保留在相关元素上，您可以“不关心”来自父元素的任何并发处理程序

$（“#div1”）。在（“单击”上，函数（e）{
e、 停止传播（）；
whoAmI（e）；
$（“#div2”）.show（）；
});
$（“#div2”）。在（“单击”上，函数（e）{
e、 停止传播（）；
whoAmI（e）；
log（“我被点击了，#div1保持打开状态”）；
});
$（“#容器”）。在（“单击”上，函数（e）{
$（“#div1，#div2”）.hide（）；
whoAmI（e）；
});
函数whoAmI（e）{
console.clear（）；
console.log（“我是”+e.target.tagName+”+（（e.target.id==“”）？“子”：e.target.id））；
}

#容器{
高度：1000px；
}
#第1部分，第2部分{
边框：1px纯红；
填料：2米；
保证金：3em；
}
#第二组{
显示：无；
}
#容器>分区>分区{
边框：1px纯蓝色；
填充：0.5em；
边缘：1米；
}

当我被单击时，我将打开div2
我也这样做。
我可以被点击，所有部门都保持开放
我也这样做。
我也是！

使用

最近的（）

和一个公共类使这变得更简单

$（文档）.mouseup（函数（e）{
！$（e.target）.最近（'.content'）.length&$（'.content'）.hide（）；
});
$（'#div1'）。单击（函数（）{
$（'#div2'）.show（）；
})

#div2{显示：无}

当我被单击时，我将打开div2
我可以被点击，所有部门都保持开放

使用

最近的（）

和一个公共类使这变得更简单

$（文档）.mouseup（函数（e）{
！$（e.target）.最近（'.content'）.length&$（'.content'）.hide（）；
});
$（'#div1'）。单击（函数（）{
$（'#div2'）.show（）；
})

#div2{显示：无}

当我被单击时，我将打开div2
我可以被点击，所有部门都保持开放

您绝对不应该两次使用确切的事件。你需要做的每件事都应该在第一个

$（文档）内完成。mouseup（函数（e）…

同意这一点，这就是

stopPropagation（）

变得很方便的地方…当你因为糟糕（或真正复杂）的设计而没有选择时。可能是重复