將事件處理程序添加到正文元素時觸發了多個事件

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>