Javascript 如何排除所选父级的子级

我想在我的游戏底部创建一个HUD显示器。HUD栏的右侧将是一个嵌套的小地图

当我将鼠标悬停在HUD上时，它将增加图像的不透明度

当我点击小地图（HUD的子地图）时，它会展开一张更大的地图。当我单击HUD（父元素）时，它将使用

toggleClass（）

应用不透明度规则

但是，我不希望在我单击子

小地图

时应用此不透明度规则，仅当我单击父

HUD

时。现在，当我单击“父项”和“子项”时，它正在应用

看

HTML

CSS

---

您可以检查单击是否发生在

#map

元素中，如

$（“#HUD”）。单击（功能（e）{
//如果#map没有任何后代，那么
//if（！$（e.target）.is（'#map'））{
if（！$（e.target）.最近（'#map'）.长度）{
$（this.toggleClass（“HUDactive”）；
}
})；

#抬头显示器{
位置：绝对位置；
溢出：隐藏；
身高：15%；
底部：0px；
宽度：100%；
边框顶部：薄实色暗灰色；
不透明度：0.3；
背景色：黑色；
过渡：不透明度。25秒缓进缓出；
-moz过渡：不透明度。25秒缓进缓出；
-webkit过渡：不透明度。25秒易入易出；
}
#抬头显示器：悬停{
边界顶部：薄而坚实的雪；
不透明度：0.8；
}
.HUDactive{
不透明度：0.8！重要；
}
#地图{
颜色：红色；
字号：18px；
字体系列：“投石机MS”，Helvetica，无衬线；
背景颜色：灰色；
身高：100%；
宽度：15%；
浮动：对；
}

---

在Javascript中，会出现一个称为“事件冒泡”的概念。当您单击某个元素时，注册到该元素的事件会首先发生。一旦完成，事件会传递到父元素，依此类推。在这种情况下，您可以通过在“#map”元素处停止事件来发挥优势

Jquery有一种简便的方法，可以使用

只需将以下代码添加到示例中：

$("#map").on('click', function(event){
  event.stopPropagation();
});

       $("#HUD").click(function(){
            $(this).toggleClass("HUDactive");
       });  

#HUD {
    position: absolute;
    overflow: hidden;
    height: 15%;
    bottom: 0px;
    width: 100%;
    border-top: thin solid darkgray;   
    opacity: 0.3;
    background-color: black;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

#HUD:hover {
    border-top: thin solid snow;   
    opacity: 0.8;
}

.HUDactive {
    opacity: 0.8 !important;
}

#map {

    color: red;
    font-size: 18px;
    font-family: "Trebuchet MS", Helvetica, sans-serif; 
    background-color: gray;
    height: 100%;
    width: 15%;
    float:right;
}

$("#map").on('click', function(event){
  event.stopPropagation();
});