イベントハンドラをボディエレメントに追加すると複数のイベントがトリガーされる

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'）は、割り当てられた値です。あなたのケースでは空文字列ではないので、結果は '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>