Mehrere Ereignisse ausgelöst, wenn Event Body zu Body Element hinzugefügt wurde

Question

Ich habe einige Marker in einer Google Map; Ich möchte dem Körperelement einen Listener hinzufügen, der erkennt, ob das angeklickte Element eine bestimmte Klasse hat, und in diesem Fall bestimmte Aktionen ausführt.

Jetzt jedes Mal, wenn ich auf Zielelement klicke, wird das Ereignis für alle Elemente ausgelöst, die die fragliche Klasse haben.

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

sollten Sie === zum Vergleich werden.

Der Wert, der von einem Zuweisungsausdruck (z. B. variable = 'value') zurückgegeben wird, ist der Wert, der zugewiesen wurde. Da dies in Ihrem Fall eine nicht leere Zeichenfolge ist, ist das Ergebnis 'truthy' und so ist die if-Anweisung immer erfolgreich.

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>