背景:
我正在使用ElectronJS制作一个游戏,我有一个名为“Shop”的商店类。它有一个我称之为“createItemElement”的方法,该方法接受一个名为“item”的对象,并创建一个li元素,以便稍后添加到ul元素中。以下是此代码。
class Shop {
// ...
createItemElement(item) {
// Item Container
const li = document.createElement("li");
// Title
const title = document.createElement("h3");
title.textContent = item.title;
// Info
const info = document.createElement("p");
info.textContent = `Type: ${item.type}`;
// Add to Cart
const addButton = document.createElement("button");
addButton.textContent = "Add to Cart";
addButton.onclick = () => console.log("Adding to cart!");
li.appendChild(title);
li.appendChild(info);
li.appendChild(addButton);
return li;
}
// ...
}
问题:
有趣的是,所有HTML都被正确呈现,一切看起来都应该是这样,但是“onclick”事件根本不起作用。 由于实际上所有这些元素都被呈现出来了,因此可以安全地假设代码确实在渲染器进程中运行。 然而,由于某种原因,事件没有传递到应用程序。 当我在应用程序中单击按钮时,什么也不会发生。 我检查了devTools并逐个查看了元素。 如预期所示,所有元素在元素检查器中都被正确列出,但是当我检查“addButton”按钮时,看不到“onclick”属性。 此外,控制台中没有任何错误,所以很好(讽刺)。 我知道在StackOverflow上有许多看似相似的问题,但我找到的答案都没有帮助或适用于我的情况。 非常困惑为什么元素被完美呈现,但事件监听器却不起作用。