Exclude sub DIV from Javascript & DOM

Question

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')");

Why don't you just do the outer Div also as a link tag (``) ? — Laisender, May 28 '22 at 16:03
And a slight variation on that: why subvert expectation by making something "invisible" cause a navigation action? And why use window.open instead of opening a tab? (which is super easy if, as asked above, you use anchor tags instead of div tags). As for the answer, have a look at [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation). But I'm pretty sure you can do this with zero JS just by using the right tag for the job and using CSS to _style_ the resulting element(s) however you want them to look. — Mike 'Pomax' Kamermans, May 28 '22 at 16:06

score 0 · Answer 1 · answered May 28 '22 at 17:42

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.

For some reasons the results that are shown from "Run code snippet" don't work. However, if you try the snippets out in your code, it should work. — Jan, May 28 '22 at 17:49

score 0 · Accepted Answer · answered May 29 '22 at 14:48

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>

Exclude sub DIV from Javascript & DOM

2 Answers2