我有兩個 div。<div id="openWebsite">和細分<div >
如果有人單擊我的根 div，他們將被重定向到example.com，當有人單擊子 div 時，他們將被重定向到example.com& example.net，他們將被重定向到兩個新選項卡中的兩個鏈接。
我想，如果有人點擊根 div，他們應該被重定向到example.com，當有人點擊子 div 按鈕時，他們應該只被重定向到example.net不example.com
如何<div >從 javascript 中排除子 div。
代碼 ：
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 中排除具有特定類的元素，https : //api.jquery.com/not/，document.querySelector 排除部分 DOM，https://www.w3schools.com/jsref/met_document_queryselectorall.asp
document.querySelectorAll("#openWebsite").not(".card__btn");
和
document.querySelectorAll(".card").not(".card__btn");
和
document.querySelectorAll("#openWebsite:not('.card__btn')");
uj5u.com熱心網友回復：
你需要讓你的內部 div 位置絕對，然后它會按照你想要的方式作業。
uj5u.com熱心網友回復：
那里你的代碼絕對沒問題，只是你用過
querySelectorAll()
代替
querySelector()
只是，因為您的頁面上只有一個 ID 為“openWebsite”的 ID，
以下是我相信您可以添加到您的 css 以使您的專案更加可見的建議
.card {
background: blue;
height: 100px;
width: 500px;
}
.card__btn {
background-color: red;
padding: 10px;
}
a {
color: white;
}
uj5u.com熱心網友回復：
事件在dom中冒泡。當您單擊錨點時，它會打開example.net。然后它上樹并觸發您的事件處理程式，導致example.com被打開。
要停止這種情況，您可以使用Event.stopPropagation. 這樣一來，事件就不會繼續上升。
因為 stackoverflow 不允許打開新選項卡，所以我還創建了一個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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/483383.html
標籤：javascript html jQuery 阿贾克斯 dom