javascript - 从背景中定位元素

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")找到.background DIV中的按钮，并触发它的click事件。

您还需要遍历所有 .background DIV 以向所有这些 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>