javascript - 事件委托(delegate)与 if else 语句一起无法正常工作

Question

我已经为 HTML 容器分配了一个事件监听器，当用户单击“再次播放”按钮时，“if”语句中的代码应该执行。单击“再次播放”按钮时没有任何反应，并且控制台上没有记录任何内容。我尝试了各种不同的方法，例如测试元素是否具有特定的类名等。

以下是相关的 HTML 代码:

<div class="play-again-btn">
 <input type="button" class="play-btn" value="PLAY AGAIN">
</div>

这里是将事件监听器分配给容器的位置:

document.querySelector(DOMstrings.endContainer).addEventListener("click", playerCtrl.playAgain);

这是 playAgain 方法:

playAgain: (event) => {
            let finishedPlayer, parentEl;

            console.log(event.target);

            //1. only action below code if correct button is clicked (correct target element is clicked) 
            if (event.target.nodeName == "input") {

                //2. delete existing character from finish line
                finishedPlayer = document.querySelector(DOMstrings.finishBox);
                finishedPlayer.removeChild(finishedPlayer.childNodes[0]);

                //3. bring character select pop up

                document.querySelector(DOMstrings.usersInput).style.visibility = "unset";


                //4. remove leaderboard pop up 

                parentEl = document.querySelector(DOMstrings.endContainer);
                parentEl.removeChild(parentEl.childNodes[1]);
            }

          },

Answer 1

Node#nodeName属性存储节点的类型(Text、Element、Comment 等)，而不是节点表示的 HTML 元素的标签名称.

因此，Node#nodeName 永远不会等于"input"，并且您的代码将不会运行。

要检查标签名称，请使用 Element#tagName相反:

if (event.target.tagName == "input") {

此外，最好检查单击的元素是否是您的按钮，因此，如果您可以选择该按钮，最好对其进行相等检查:

if (event.target === document.querySelector(selectorOfButton)) {