stopPropagation() no funciona en mi código. ¿Cual es el problema?
Cuando haga clic en el botón, se alternará un menú desplegable y quiero ocultar este alternar cuando el usuario haga clic en cualquier lugar de la página.
var iconListBoxBody; function btnCrypto(e) { e.stopPropagation(); iconListBoxBody = document.getElementById("iconListBoxBody"); iconListBoxBody.classList.toggle("active"); } document.body.addEventListener("click", function() { iconListBoxBody.classList.remove("active"); }); .iconListBoxBody { display: none; } .iconListBoxBody.active { display: block; } <div class="iconListBox"> <div class="iconListBoxHeader"> <img src="assets/images/coin1.png" alt=""> <input type="text" class="form-control" value="BTC" /> <button class="btn-crypto btn btn-primary" onclick="btnCrypto()"><i class="fa fa-chevron-down"></i>click</button> </div> <div class="iconListBoxBody" id="iconListBoxBody"> <ul class="iconListBoxBodyList"> <li> <img src="assets/images/coin1.png" alt=""> <span class="coinText">BTC</span> </li> <li> <img src="assets/images/coin2.png" alt=""> <span class="coinText">ETH</span> </li> </ul> </div> </div>Se agregaron detectores de eventos de JavaScript.
var iconListBoxBody; function btnCrypto(e) { e.stopPropagation(); iconListBoxBody = document.getElementById("iconListBoxBody"); iconListBoxBody.classList.toggle("active"); } document.body.addEventListener("click", function() { iconListBoxBody.classList.remove("active"); }); document.querySelectorAll(".btn-crypto").forEach(el => (el.onclick = btnCrypto)) .iconListBoxBody { display: none; } .iconListBoxBody.active { display: block; } <div class="iconListBox"> <div class="iconListBoxHeader"> <img src="assets/images/coin1.png" alt=""> <input type="text" class="form-control" value="BTC" /> <button class="btn-crypto btn btn-primary"> <i class="fa fa-chevron-down"></i>click</button> </div> <div class="iconListBoxBody" id="iconListBoxBody"> <ul class="iconListBoxBodyList"> <li> <img src="assets/images/coin1.png" alt=""> <span class="coinText">BTC</span> </li> <li> <img src="assets/images/coin2.png" alt=""> <span class="coinText">ETH</span> </li> </ul> </div> </div>Simplemente olvidó pasar el parámetro de event , cambié onclick="btnCrypto()" a onclick="btnCrypto(event)" :
var iconListBoxBody; function btnCrypto(e) { e.stopPropagation(); iconListBoxBody = document.getElementById("iconListBoxBody"); iconListBoxBody.classList.toggle("active"); } document.body.addEventListener("click", function() { iconListBoxBody.classList.remove("active"); }); .iconListBoxBody { display: none; } .iconListBoxBody.active { display: block; } <div class="iconListBox"> <div class="iconListBoxHeader"> <img src="assets/images/coin1.png" alt=""> <input type="text" class="form-control" value="BTC" /> <button class="btn-crypto btn btn-primary" onclick="btnCrypto(event)"><i class="fa fa-chevron-down"></i>click</button> </div> <div class="iconListBoxBody" id="iconListBoxBody"> <ul class="iconListBoxBodyList"> <li> <img src="assets/images/coin1.png" alt=""> <span class="coinText">BTC</span> </li> <li> <img src="assets/images/coin2.png" alt=""> <span class="coinText">ETH</span> </li> </ul> </div> </div>Como ya está usando addEventListener , elimine el JS en línea que llama a la función btnCrypt y use addEventListener para agregarlo al elemento del botón almacenado en caché.
// Cache your elements const iconListBoxBody = document.querySelector('.iconListBoxBody'); const button = document.querySelector('.btn-crypto'); function btnCrypto(e) { e.stopPropagation(); iconListBoxBody.classList.add('active'); } document.body.addEventListener('click', function() { iconListBoxBody.classList.remove('active'); }); button.addEventListener('click', btnCrypto); .iconListBoxBody { display: none; } .active { display: block; } <div class="iconListBox"> <div class="iconListBoxHeader"> <img src="assets/images/coin1.png" alt=""> <input type="text" class="form-control" value="BTC" /> <button class="btn-crypto btn btn-primary"> <i class="fa fa-chevron-down"></i>click</button> </div> <div class="iconListBoxBody" id="iconListBoxBody"> <ul class="iconListBoxBodyList"> <li> <img src="assets/images/coin1.png" alt=""> <span class="coinText">BTC</span> </li> <li> <img src="assets/images/coin2.png" alt=""> <span class="coinText">ETH</span> </li> </ul> </div> </div>