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

Question

我在Google地图上有一些标记； 我想在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' ）是分配的值。 由于在您的情况下这是一个非空字符串，因此结果是“真实的”，因此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>