按钮单击事件侦听器在Electron应用程序中不工作

Question

背景：

我正在使用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上有很多看似相似的问题，但我发现的答案都没有帮助或适用于我的情况。为什么元素被完美地呈现，但事件监听器却不起作用，这让人非常困惑。

完整的项目可以在这里找到，下面摘录的文件可以在这里发现。

Answer 1

我查看了您的shop.js页面，您错误地将onclick事件的大小写放在一个地方，而不是另一个地方。使用camel-cased版本的onclick不会产生任何错误，也不会执行任何操作。

不起作用：

empty_cart_button.onClick = (evt) => this.emptyCart();

作品：

addButton.onclick = () => this.addToCart(item);

Answer 2

正如我从您的代码中看到的，您在商店实例.getHTML()方法中使用el.innerHTML。这将在没有任何事件侦听器的情况下以原始字符串的形式返回内部HTML，这就是为什么您可以看到预期的呈现内容，但单击侦听器不起作用。

在sketch.js文件中，toggleShop函数应使用appendChild，而不是：document.querySelector("#shop-container").innerHTML = shop.getHTML();

你应该这样做：

document.querySelector("#shop-container").appendChild(shop.getElement())

在CCD_ 10类中添加CCD_ 11方法：

getElement() {
return this.el;
}

当你想关闭#shop-containerinnerHTML时，一定要切换商店并删除它。

此外，正如@Andy Hoffman所回答的，您应该设置onclick属性，而不是onClick。