Tengo dos div. <div class="card" id="openWebsite"> y subdiv <div class="card__btn">
Si alguien hace clic en mi div raíz, será redirigido a example.com y cuando alguien haga clic en sub div, será redirigido a example.com y example.net , será redirigido a dos enlaces en dos pestañas nuevas.
Quiero, si alguien hace clic en root div, debería ser redirigido a example.com y cuando alguien haga clic en el botón sub div, solo debería ser redirigido a example.net , no a example.com
cómo excluir sub div <div class="card__btn"> de javascript.
Código:
const webPage = document.querySelectorAll("#openWebsite"); webPage.forEach((e) => { e.addEventListener("click", () => { const site = e.getAttribute("data-site"); window.open(site, "_blank") || window.location.replace(site); }); }); .card { background: blue; height: 100px; width: 500px; } <div class="card" id="openWebsite" data-site="https://example.com"> <div class="card__btn"> <a href="https://example.net"> Visit Site </a> </div> </div>Ya probé desde jQuery excluir elementos con cierta clase en el selector , https://api.jquery.com/not/ , document.querySelector excluye parte de DOM , https://www.w3schools.com/jsref/met_document_queryselectorall.asp
document.querySelectorAll("#openWebsite").not(".card__btn");y
document.querySelectorAll(".card").not(".card__btn");y
document.querySelectorAll("#openWebsite:not('.card__btn')");Debe hacer que su posición de div interna sea absoluta, luego funcionará de la manera que desee.
ahí tu código está absolutamente bien, solo que usaste
querySelectorAll()en vez de
querySelector()solo, porque solo tiene una identificación en su página con la identificación "openWebsite",
a continuación hay una sugerencia que creo que puede agregar a su css para que su proyecto sea más visible
.card { background: blue; height: 100px; width: 500px; } .card__btn { background-color: red; padding: 10px; } a { color: white; }Los eventos burbujean en el dom. Cuando haces clic en el ancla, se abre example.net . Luego sube por el árbol y se activa el controlador de eventos, lo que hace que se abra example.com .
Para detener esto, puede usar Event.stopPropagation . De esa forma, el evento no seguirá subiendo por el árbol.
Debido a que stackoverflow no permite que se abran nuevas pestañas, también he creado un violín .
const webPage = document.querySelectorAll("#openWebsite"); webPage.forEach((e) => { e.addEventListener("click", () => { const site = e.getAttribute("data-site"); window.open(site, "_blank") || window.location.replace(site); }); }); document.querySelector(".card__btn").addEventListener("click", event => { event.stopPropagation(); }); .card { background: blue; height: 100px; width: 500px; } <div class="card" id="openWebsite" data-site="https://example.com"> <div class="card__btn"> <a href="https://example.net"> Visit Site </a> </div> </div>