时间戳

首页 > 解决方案 > Web 组件元素单击事件侦听器不起作用

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

问题描述

我正在创建一个简单的石头剪刀布游戏。

我决定不使用任何框架，所以我完全用纯 JavaScript 来做，使用 Web 组件。

我已经设法完成了我想做的几乎所有事情，但是有一个组件（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');
}

我不能把整个代码放在这里，它太难读了。
但是您可以在这里找到所有内容，甚至可以自己进行测试npm run dev

任何想法都非常感谢。

标签： javascriptdomweb-component

解决方案

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

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

然后你再打电话_initEvenListeners()。

推荐阅读