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: 50px; 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')");Los enlaces anidados son ilegales , por lo que en la mayoría de los casos no es una buena idea intentar lograr esto de todos modos. Sin embargo, como ya mencionaron algunos Laisender y Mike en los comentarios de su pregunta, existen soluciones mucho más fáciles para ese problema que su solución actual.
Una posible solución es colocar la etiqueta a alrededor de div.card y reemplazar el enlace dentro de div.card__btn con un span en el que se pueda hacer clic. Sin embargo, esto podría no ser bueno para la accesibilidad y también podría ser irritante para el usuario al mirar la URL al pasar el mouse sobre los enlaces.
.card { background: blue; height: 50px; width: 500px; } <a id="openWebsite" href="https://example.com" target="_blank"> <div class="card" id="openWebsite"> <div class="card__btn"> <span onclick="window.location='https://example.net'"> Visit Site </span> </div> </div> </a>Una solución un poco más accesible sería crear un nuevo enlace y diseñarlo para que llegue a toda la tarjeta:
.card { background: blue; height: 50px; width: 500px; position: relative; } .card>a { top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; text-indent: 100%; white-space: nowrap; position: absolute; z-index: 0; } .card__btn { z-index: 1; position: relative; } <div class="card" id="openWebsite" data-site="https://example.com"> <a href="https://example.com" target="_blank"></a> <div class="card__btn"> <a href="https://example.net"> Visit Site </a> </div> </div> También existe la posibilidad de lograr esto con el object -etiqueta, sin embargo, por lo que he escuchado, no se recomienda su uso.
¡¡Esto funcionará!!
<script> const webPage = document.querySelectorAll("#openWebsite"); webPage.forEach((e) => { e.addEventListener("click", (data) => { if (data.target !== e.querySelector("a")) { const site = e.getAttribute("data-site"); window.open(site, "_blank") || window.location.replace(site); } }); }); </script>