在JavaScript中排除DOM的sub div

Question

我有两个分区。 ＆lt; div class =“ card” id =“ openwebsite”＆gt; 和sub div ＆lt; div class =“ card__btn”＆gt;

如果有人单击我的根div，将被重定向到 example.com ，当某人单击sub div时，它们将重定向到 example.com ＆amp; 示例，他们在两个新选项卡中重定向两个链接。

我想要，如果有人单击root div，他们应该将其重定向到 example.com ，当某人单击sub div按钮时，他们只能将其重定向到 example.net not not代码> example.com

如何排除sub div ＆lt; div class =“ card__btn”＆gt; 从javaScript中。

代码 ：

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>

已经从 jQuery排除了selector ，jquery ， https://api.jquery.com/not/ ， document.document.document.document.queryselector排除Dom 的一部分/MET_DOCUMEMENT_QUERYSELECTORALL.ASP“ RER =“ Nofollow Noreferrer”> https://www.w3schools.com/jsref/met_document_queryselectorallectorall.asp

document.querySelectorAll("#openWebsite").not(".card__btn");

和

document.querySelectorAll(".card").not(".card__btn");

document.querySelectorAll("#openWebsite:not('.card__btn')");

Answer 1

您需要使您的内部DIV位置绝对，然后它将按照您想要的方式工作。

Answer 2

那里
您的代码绝对可以，只是您

querySelectorAll()

仅用的代替

querySelector()

您使用的代码，因为您在页面上只有一个ID具有“ openwebsite”的ID，

下面是我相信您可以添加到CSS的建议，以使您的项目更加可见

    .card {
       background: blue;
       height: 100px;
       width: 500px;
    }
    .card__btn {
       background-color: red;
       padding: 10px;
      }
    a {
       color: white;
      }

Answer 3

事件在DOM上冒泡。单击锚时，它将打开示例.net 。
然后它上升到树，您的事件处理程序被触发，导致 example.com 要打开。
要停止此操作，您可以使用”代码> 。这样，事件将不会继续爬上树。

因为Stackoverflow不允许打开新的选项卡，所以我还创建了a fiddle 。

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>