CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3871
user3871

Reputation: 12708

How to exclude children of selected parent

I want to create a HUD display on the bottom of my game. To the right of the HUD bar will be a nested minimap.

When I hover over the HUD, it will increase opacity of the

When I click on the minimap (child of HUD), it will expand a larger map. When I click on the HUD (parent element), it will apply the opacity rule with toggleClass().

I don't want this opacity rule to be applied when I click on the child minimap though, only when I click on the parent HUD. Right now it's being applied when I click on parent and child.

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

Upvotes: 1

Views: 57

Answers (2)

Mario
Mario

Reputation: 2942

In Javascript a concept called "event bubbling" occurs. When you click on an element the events registered to that element occur first. Once they are completed, the event travels to the parent, and so on. You can use this to your advantage in this case, by stopping the event at the "#map" element.

Jquery has a handy way of doing this using stopPropagation.

Just add this code to your example:

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

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

You can check whether the click was happened in the #map element like

$("#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>

Upvotes: 1

Related Questions