时间戳

首页 > 解决方案 > 无法对 Electron 应用中的点击事件做出反应

javascript - 无法对 Electron 应用中的点击事件做出反应

问题描述

我已经使用 Electron 将我的 HTML+CSS+JS 应用程序打包成可执行文件，但是它的工作方式与在浏览器中的工作方式不同。具体来说，我的应用程序似乎没有对点击事件做出反应，而如果我在浏览器中运行该应用程序，点击事件就不会出现问题。

这是我构建应用程序的方式。在一个名为index.html我的文件中，我有以下内容：

<!DOCTYPE html>
<html>
<head>
   ...
    <script src="js/default.js"></script>
   ...
</head>
<body onload="prepareGame()">
    ...
</body>
</html>

prepareGame()在内部定义的函数js/default.js是我向 DOM 元素添加点击侦听器的地方：

function prepareGame() {
    ...
    gameArea.addEventListener('click', clickListener);
}

whereclickListener也定义在js/default.jsand 是我想在点击事件时执行的函数。问题是clickListener当我点击我注册了监听器的元素时，它不会被执行。更奇怪的是它prepareGame()确实被执行了（我已经通过在alert()它里面放了一个检查过）， line 也是如此gameArea.addEventListener('click', clickListener);，但是clickListener()当我点击元素时不会被调用。请注意，当我在浏览器上运行我的应用程序时，我没有这个问题，即clickListener()在我单击元素时执行。

老实说，我不明白为什么会这样。

标签： javascripthtmlelectron

解决方案

也许使用脚本而不是 HTML 中的事件来尝试这样的操作。

我不知道你是如何初始化 gameArea 对象的，但是当 DOM 准备好时，我们在这里得到它。 

let gameArea;

const clickListener = ({ target }) => {
  console.log(target.innerHTML);
};

const prepareGame = () => {  
    // set gameArea now DOM is ready
    gameArea = document.querySelector('.gameArea');
    gameArea.addEventListener('click', clickListener);
}

document.addEventListener('DOMContentLoaded', () => {
  prepareGame();
});
<!DOCTYPE html>
<html>
<head>
 
</head>
<body class="gameArea">
  <div>1</div>
  <div>2</div>
</body>
</html>

推荐阅读