Question

我正在创建一个简单的 Rock，Paper，剪刀游戏。

我决定不使用任何框架，因此我将使用Web组件完全在纯JavaScript中完成

。

我几乎可以做我想做的所有事情，但是有一个组件（ResultDisplay），由于某些原因，点击事件在重放和重置按钮。

这很奇怪，因为我附近有一个非常相似的组件（StartCounter），该组件具有一个按钮单击侦听器，并且在那里运行非常完美！

我不明白我在想什么...

_initEventListeners() {
  // This is always called.
  this.replayButton.addEventListener('click', this._onReplayClick.bind(this));
  this.resetButton.addEventListener('click', this._onResetClick.bind(this));
}

_onReplayClick() {
  // This is never called when I'm clicking on the button.
  this.triggerEvent('replay');
}

我不能将整个代码放在这里，这太难读了。
但是您可以找到所有here，甚至可以自己使用npm run dev

对其进行测试

任何想法都值得赞赏。

Answer 1

在代码中，您将事件监听器添加到初始<result-display>内容内的按钮上。

但是，当您要显示第一个游戏的结果时，再次调用createTemplate()，它会在shadowRoot中使用新按钮重新创建一个新的DOM，而没有附加事件侦听器。

您愿意，然后再次致电_initEvenListeners()。

Web组件元素单击事件侦听器不起作用

1 个答案: