CODEWITHSUNDEEP
javascriptevent-delegation
George Katsanos
George Katsanos

Reputation: 14195

Multiple events triggered when adding event handler to body element

I have some markers in a google map; I'd like add a listener to the body element, which will detect if the element clicked has a certain class and do certain actions if so.

Now, everytime I click on target element, the event is triggered for all of the items which have the class in question.

document.body.addEventListener('click', function(e) {
  e.stopPropagation();
  if (e.target.className === "price-bubble") {
    // do stuff
    console.log("hit target");
  } else {
    // do other stuff
    console.log("not hit target");
  }
});
html,
body {
  height: 100%;
}
body {
  border: 1px solid;
}
.price-bubble {
  border: 1px solid blue;
}
<div class="map">
  <div class="room-marker">
    <div class="dot" style="display: block;">
      <div class="spacer"></div>
      <div class="element">
        <div class="icon"></div>
      </div>
    </div>
    <div class="bubble">
      <div class="spacer"></div>
      <div class="element">
        <div class="price-bubble">12,20&nbsp;€</div>
      </div>
    </div>
        <div class="bubble">
      <div class="spacer"></div>
      <div class="element">
        <div class="price-bubble">12,20&nbsp;€</div>
      </div>
    </div>
        <div class="bubble">
      <div class="spacer"></div>
      <div class="element">
        <div class="price-bubble">12,20&nbsp;€</div>
      </div>
    </div>
        <div class="bubble">
      <div class="spacer"></div>
      <div class="element">
        <div class="price-bubble">12,20&nbsp;€</div>
      </div>
    </div>
        <div class="bubble">
      <div class="spacer"></div>
      <div class="element">
        <div class="price-bubble">12,20&nbsp;€</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 49

Answers (1)

gyre
gyre

Reputation: 16777

You should be using === for comparison.

The value that is returned from an assignment expression (e.g., variable = 'value') is the value that was assigned. Since this is a non-empty string in your case, the result is 'truthy' and so the if statement always succeeds.

document.body.addEventListener('click', function(e) {
  e.stopPropagation();
  if (e.target.className === "price-bubble") {
    // do stuff
    console.log("hit target");
  } else {
    // do other stuff
    console.log("not hit target");
  }
});
html,
body {
  height: 100%;
}
body {
  border: 1px solid;
}
.price-bubble {
  border: 1px solid blue;
}
<div class="map">
  <div class="room-marker">
    <div class="dot" style="display: block;">
      <div class="spacer"></div>
      <div class="element">
        <div class="icon"></div>
      </div>
    </div>
    <div class="bubble">
      <div class="spacer"></div>
      <div class="element">
        <div class="price-bubble">12,20&nbsp;€</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions