Question

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

当我将鼠标悬停在HUD上时，会增加

的不透明度

当我点击小地图（HUD的孩子）时，它会展开一个更大的地图。当我单击HUD（父元素）时，它将使用toggleClass()应用不透明度规则。

我不希望在点击孩子minimap时应用此不透明度规则，只有当我点击父HUD时。现在，当我点击父母和孩子时，它被应用了。

请参阅DEMO

HTML

       <div id="HUD">
          <div id="map"></div>  
       </div>

JS

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

CSS

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

Answer 1

在Javascript中出现了一个名为“事件冒泡”的概念。单击元素时，首先会注册到该元素的事件。完成后，事件将传递给父母，依此类推。在这种情况下，您可以通过在“#map”元素处停止事件来使用此优势。

Jquery使用stopPropagation有一种方便的方法。

只需将此代码添加到您的示例中：

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

Answer 2

您可以检查点击是否发生在#map元素中，如

$("#HUD").click(function(e) {
  //if #map don't have any descendants then
  //if (!$(e.target).is('#map')) {
  if (!$(e.target).closest('#map').length) {
    $(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="HUD">
  <div id="map"></div>
</div>

如何排除选定父母的子女

2 个答案: