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

Question

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

我决定不使用任何框架，所以我将使用Web组件完全在纯JavaScript中完成它。

我已经设法完成了几乎所有我想做的事情，但是有一个组件（ResultDisplay），由于某些原因，单击事件在replay和reset按钮上不起作用。

这很奇怪，因为我附近有一个非常相似的组件（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()。