在Electron应用程序中，按钮的onClick事件监听器无法正常工作

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

完整项目可在此处找到，下面摘录的文件可在此处找到。

- Ethan Davidson

---

伊桑进行了一些搜索，我认为当您将元素添加到DOM时，您需要添加此事件侦听器。而不是在之前。 - Bibberty

Answer 1

我看了你的 shop.js 页面，发现你在一个地方错误地使用了驼峰式大小写来书写 onclick 事件，但在另一个地方没有。使用驼峰式大小写的版本将不会产生错误，但也不会有任何作用。

无法工作：

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

工作内容：

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

- Andy Hoffman

Answer 2

从您的代码中可以看出，您在shop实例的getHTML()方法中使用了el.innerHTML。这将返回内部HTML作为原始字符串，没有任何事件监听器，这就是为什么您可以看到渲染后的内容，但点击监听器不起作用的原因。

在sketch.js文件中，toggleShop函数应该使用appendChild，而不是:

document.querySelector ("#shop-container").innerHTML = shop.getHTML();

你应该这样做:

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

在Shop类中添加getElement方法:

getElement() {
    return this.el;
}

当您想要切换时，请务必切换商店并删除#shop-container的innerHTML。

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

- udidu

---

哇塞，你真是太聪明了！我从没想过那个方法！非常感谢你的帮助！ - Ethan Davidson