I have two div. <div class="card" id="openWebsite"> and sub div <div class="card__btn">
If someone clicks on my root div they will get redirected to example.com and when someone clicks sub div they are redirected to example.com & example.net, they are getting redirected two both links in two new tab.
I want, if someone clicks on root div they should get redirected to example.com and when someone clicks on sub div button they should only be redirected to example.net not example.com
how to exclude sub div <div class="card__btn"> from javascript.
Code :
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>Already tried from jQuery exclude elements with certain class in selector , https://api.jquery.com/not/ , document.querySelector exclude part of DOM, https://www.w3schools.com/jsref/met_document_queryselectorall.asp
document.querySelectorAll("#openWebsite").not(".card__btn");
and
document.querySelectorAll(".card").not(".card__btn");
and
document.querySelectorAll("#openWebsite:not('.card__btn')");
Nested links are illegal, so in most cases it is not a good idea to try to achieve this anyways. However, as already mentioned by some Laisender and Mike in the comments of your question, there are much easier solutions for that problem than your current solution.
One possible solution is to put the a-tag around the div.card and replace the link within the div.card__btn with a clickable span. However, this might be not good for accessability and also could be irritating for the user when looking at the url when hovering over the links.
.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>A bit more accessabile solution would be to create a new link and style it so that it reaches all over the card:
.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>There is also the possibility to achieve this with the object-tag, however from what I've heard it is not recommended to be used.
This will work!!
<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>