javascript - 将事件处理程序添加到 body 元素时触发多个事件

Question

我在谷歌地图上有一些标记；我想向 body 元素添加一个监听器，它将检测单击的元素是否具有特定的类，如果是，则执行特定的操作。

现在，每次我单击目标元素时，所有具有相关类的项目都会触发该事件。

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>

Answer 1

您应该使用 === 进行比较。

从赋值表达式(例如，variable = 'value')返回的值是已分配的值。由于在您的情况下这是一个非空字符串，因此结果为“truthy”，因此 if 语句始终会成功。

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>