Question

我已经使用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);
}

其中clickListener也在js/default.js中定义，并且是我希望在单击事件时执行的功能。问题是，当我单击为其注册了侦听器的元素时，clickListener无法执行。更让人感到奇怪的是，prepareGame()确实被执行了（我已经通过在其中放入alert()进行了检查），行gameArea.addEventListener('click', clickListener);也是如此，但是{{1}当我单击该元素时，不会被调用。请注意，当我在浏览器上运行我的应用程序时，我没有这个问题，即当我单击该元素时clickListener()被执行。

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

Answer 1

也许可以使用脚本而不是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>

无法对电子应用程序中的单击事件做出反应

1 个答案: