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

Posted 2023-03-22

【中文标题】按钮 onClick 事件侦听器在 Electron 应用程序中不起作用

【英文标题】：Button onClick Event Listener not working in Electron app

【发布时间】：2019-05-27 06:42:21

【问题描述】：

背景：

我正在使用 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”属性。 此外，控制台中没有任何错误，所以很好（讽刺）。 而且我知道在 *** 上提出了许多看似相似的问题，但我找到的答案都没有帮助或适用于我的情况。 为什么元素被完美渲染但事件监听器不起作用，这非常令人困惑。

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

【问题讨论】：

Ethan 做了一些查看，我认为当您将元素添加到 DOM 时，您需要添加此事件侦听器。以前没有。

【参考方案1】：

我查看了您的shop.js 页面，您错误地将onclick 事件在一个地方，而不是在另一个地方。使用 onclick 的驼峰式版本不会产生任何错误并且什么都不做。

不起作用：

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

作品：

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

【参考方案2】：

正如我从您的代码中看到的，您在商店实例 .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-containerinnerHTML。

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

【讨论】：

天啊，你真是太棒了！！！我没想到！非常感谢您的帮助！