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

可以找到完整的项目 here可以找到下面摘录的文件 here .

Answer 1

我看了你的shop.js页面，并且您在一个地方错误地驼峰式命名了 onclick 事件，但在另一个地方却没有。使用 onclick 的驼峰式版本不会产生任何错误，也不会执行任何操作。

无效:

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

作品:

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