为什么变量按钮被分配给窗口对象，以及如何修复它

Question

我想在单击时为const button= e.currentTarget;分配按钮元素，但它被分配了窗口对象，因此const container= button.parentNode;也不起作用。你能解决这个错误吗。我只提到了按钮和容器所在的部分元素。

window.addEventListener("DOMContentLoaded", function(e) {
const orderButtons = document.querySelectorAll("button[data-order]");
orderButtons.forEach(function(button){
window.addEventListener("click", function(e) {
//button is assigned with window object, should be assigned clicked button

const button= e.currentTarget; 
const container= button.parentNode;
const order={
id: button.getAttribute("data-order"),
title: container.querySelector(".title").innerText,
price: container.querySelector(".price").innerText,
desc: container.querySelector(".desc").innerText
};

localStorage.setItem("order", JSON.stringify(order));
const url= window.location.href.replace("pies.html","order.html");
window.location.href=url;
});
});
});

<section class="desktop-column">
<div class="pie">
<img src="images/apple-pie.png" alt="Apple Pie">
<div class="columns">
<div class="title">Apple Pie</div>
<div class="price">300 ₹</div>
</div>
<p class="desc">Our famous pie.</p>
<button data-order="apple-pie">Order</button>
</div>
<div class="pie">
<img src="images/cherry-pie.png" alt="Cherry Pie">
<div class="columns">
<div class="title">Cherry Pie</div>
<div class="price">340 ₹</div>
</div>
<p class="desc">Our summer classic!.</p>
<button data-order="cherry-pie">Order</button>
</div>
</section>

Answer 1

currentTarget是事件处理程序绑定到的元素。

您希望事件最初在其上触发的元素为纯target。

Answer 2

我想你想拿走你按下的按钮的data-order，比如：

window.addEventListener("DOMContentLoaded", function(e) {
const orderButtons = document.querySelectorAll("button[data-order]");
orderButtons.forEach(function(button){
button.addEventListener("click", function(e) {
//button is assigned with window object, should be assigned clicked button

const container= this.parentNode;
const order={
id: this.getAttribute("data-order"),
title: container.querySelector(".title").innerText,
price: container.querySelector(".price").innerText,
desc: container.querySelector(".desc").innerText
};

console.log(order);
});
});
});

<section class="desktop-column">
<div class="pie">
<img src="images/apple-pie.png" alt="Apple Pie">
<div class="columns">
<div class="title">Apple Pie</div>
<div class="price">300 ₹</div>
</div>
<p class="desc">Our famous pie.</p>
<button data-order="apple-pie">Order</button>
</div>
<div class="pie">
<img src="images/cherry-pie.png" alt="Cherry Pie">
<div class="columns">
<div class="title">Cherry Pie</div>
<div class="price">340 ₹</div>
</div>
<p class="desc">Our summer classic!.</p>
<button data-order="cherry-pie">Order</button>
</div>
</section>

注意：我将代码段的localStorage()更改为console.log()

Answer 3

在上面的代码中，错误是在window对象调用事件侦听器

window.addEventListener("click", function(e) {
const button= e.currentTarget; 
const container= button.parentNode;

这就是为什么当button被分配时，currentTarget窗口对象被分配，而窗口对象没有parentNode，这就是为什么container是undefined。

`const order={
id: button.getAttribute("data-order"),
title: container.querySelector(".title").innerText,
price: container.querySelector(".price").innerText,
desc: container.querySelector(".desc").innerText
};`

由于container和button的值错误，getAttribute querySelector无法选择DOM元素，导致Uncaught TypeError

正确的代码片段-

button.addEventListener("click", function(e) {
const button= e.currentTarget;
const container= button.parentNode;
const order={
id: button.getAttribute("data-order"),
title: container.querySelector(".title").innerText,
price: container.querySelector(".price").innerText,
desc: container.querySelector(".desc").innerText
};
});