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);

Answer 2

从您的代码中可以看到，您正在商店实例el.innerHTML方法中使用.getHTML()。这将以不带任何事件侦听器的原始字符串形式返回内部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。

按钮onClick事件侦听器在Electron应用程序中不起作用

2 个答案: