从背景定位元素

Question

使用 Javascript，假设我有 3 个我无法访问的容器背景，在该容器内我有一个按钮可以做某事，例如：打开一个新窗口、警报和模态。

如果我想单击背景并定位到该按钮以在同一容器中执行相同的操作，该怎么做？

我尝试使用目标或当前目标，但不起作用。

const linkButton = document.querySelector(".link");
const alertButton = document.querySelector(".alert");
const backgroundClick = document.querySelector(".background");
linkButton.addEventListener("click", function () {
	console.log("test");
})
alertButton.addEventListener("click", function () {
	alert("alert");
})
backgroundClick.addEventListener("click", function () {
	console.log("working");
})

body {
color: #eaeaea;
padding: 0;
margin: 0;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
.background {
background: yellow;
padding: 50px;
text-align: center;
margin-bottom: 20px;
}
/* The button used to close the modal */
.closebtn {
text-decoration: none;
float: right;
font-size: 35px;
font-weight: bold;
color: #fff;
}
.closebtn:hover,
.closebtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
header {
background-color: #5cb85c;
font-size: 25px;
color: white;
width: 50%;
margin: auto;
}
/*Open modal*/
/* The modal's background */
.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
margin: auto;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Display the modal when targeted */
.modal:target {
display: table;
position: absolute;
}
/* The modal box */
.modal-dialog {
display: table-cell;
vertical-align: middle;
}

<div class="background">
<a class="link" href="https://www.google.com/" target="_" style="display: inline-block;">
<button>Button Link</button>
</a>
</div>
<div class="background">
<button class="alert">Button Alert</button>
</div>
<div class="background">
<a href="#id01">
<Open class="alert">Open Modal</button>
</a>
<div id="id01" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<header class="container">
<a href="#" class="closebtn">×</a>
<h2>Modal Header</h2>
</header>
</div>
</div>
</div>
</div>

Answer 1

使用this.querySelector("button")查找.backgroundDIV 内的按钮，并触发其click事件。

您还需要遍历所有.backgroundDIV 以向所有 DIV 添加侦听器。

我在按钮事件处理程序中使用e.stopPropagation()。否则，点击事件将冒出背景，您将获得无限的事件循环。

const linkButton = document.querySelector(".link");
const alertButton = document.querySelector(".alert");
const backgroundClick = document.querySelectorAll(".background");
linkButton.addEventListener("click", function(e) {
console.log("test");
e.stopPropagation();
})
alertButton.addEventListener("click", function(e) {
alert("alert");
e.stopPropagation();
})
backgroundClick.forEach(el => el.addEventListener("click", function() {
let button = this.querySelector("button");
button.click();
}));

body {
color: #eaeaea;
padding: 0;
margin: 0;
font: 16px "Open Sans", Helvetica, Arial, sans-serif;
}
.background {
background: yellow;
padding: 50px;
text-align: center;
margin-bottom: 20px;
}
/* The button used to close the modal */
.closebtn {
text-decoration: none;
float: right;
font-size: 35px;
font-weight: bold;
color: #fff;
}
.closebtn:hover,
.closebtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
header {
background-color: #5cb85c;
font-size: 25px;
color: white;
width: 50%;
margin: auto;
}
/*Open modal*/
/* The modal's background */
.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
margin: auto;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Display the modal when targeted */
.modal:target {
display: table;
position: absolute;
}
/* The modal box */
.modal-dialog {
display: table-cell;
vertical-align: middle;
}

<div class="background">
<a class="link" href="https://www.google.com/" target="_" style="display: inline-block;">
<button>Button Link</button>
</a>
</div>
<div class="background">
<button class="alert">Button Alert</button>
</div>
<div class="background">
<a href="#id01">
<button class="alert">Open Modal</button>
</a>
<div id="id01" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<header class="container">
<a href="#" class="closebtn">×</a>
<h2>Modal Header</h2>
</header>
</div>
</div>
</div>
</div>