javascript - 按钮需要单击两次才能触发 onclick答案

【问题标题】：javascript - button needs to be click twice for onclick to triggerjavascript - 按钮需要单击两次才能触发 onclick
【发布时间】：2017-09-23 23:31:01
【问题描述】：

为什么我的按钮需要被点击两次才能触发 onclick 事件？ stackoverflow 上还有其他一些线程存在同样的问题，但在我发现的所有线程中，原始海报将事件处理程序放在函数内。我的代码不是这样的。

HTML

<body>
    <ul id="parentList">
        <li>First child</li>
        <li>Second child</li>
        <li>Third child</li>
        <li>Forth child</li>
        <li>Fifth child</li>
    </ul>
    <button type="button" id="delete">Delete first child</button>
</body>

脚本：

var parentList = document.getElementById("parentList");
document.getElementById("delete").onclick = function() {
    parentList.removeChild(parentList.firstChild);
};

演示：onclick-error

【问题讨论】：

你试过在函数中定义 parentList 吗？
@FelixHäberle 你是什么意思？它需要被点击两次，但是
子元素确实被移除了，所以浏览器必须识别 parentList 不是吗？

【解决方案1】：

parentList 中的第一个“元素”是空格。您可以通过控制台记录事件侦听器中的元素来查看这一点。

因此，您只需过滤掉父项中的 li 元素。

document.getElementById("delete").onclick = function() {
    var listItems = document.querySelectorAll("#parentList > li");

    if (listItems.length > 0) {
        listItems[0].remove();
    }
};

https://jsfiddle.net/ofLvac32/13/

您也可以使用parentList.firstElementChild 代替 parentList.firstChild，它会过滤掉所有无效节点（空白）。

一个例子

var parentList = document.getElementById("parentList");

document.getElementById("delete").onclick = function() {
    parentList.removeChild(parentList.firstElementChild);
};

https://jsfiddle.net/ofLvac32/37/

【讨论】：

还有firstElementChild 方法。另请注意，IE 不支持 childNode.remove()。
感谢您的建议！我会将其添加到答案中作为替代解决方案！我不知道这个

【解决方案2】：

按钮上的单击处理程序没有任何问题。问题在于您移除第一个孩子的方式。如果你将这个小改动添加到你的函数中：

var parentList = document.getElementById("parentList");
    document.getElementById("delete").onclick = function() {
    console.log(parentList.removeChild(parentList.firstChild));
};

您会注意到第一次单击会注销一些带有换行符的空格。这似乎是一个空文本节点。第二次点击删除第一个<li>等等...

【讨论】：

【解决方案3】：

使用elementChild，您可以查找任何个子元素，包括空格。

您可以改用parentList.firstElementChild 来获取第一个子元素。

【讨论】：

【解决方案4】：

正如你在下面的 sn-p 中看到的，第一个孩子是新行和空格的字符串：

function loaded(){
  document.getElementById("parentList");
  var firstChild = parentList.firstChild;
  console.log("First child: \"" + firstChild.data + "\"");
}

<body onload="javascript:loaded()">
	<ul id="parentList">
		<li>First child</li>
		<li>Second child</li>
		<li>Third child</li>
		<li>Forth child</li>
		<li>Fifth child</li>
	</ul>
</body>

您可以使用firstElementChild 属性仅获取第一个子元素，例如：

var parentList = document.getElementById("parentList");
document.getElementById("delete").onclick = function() {  parentList.removeChild(parentList.firstElementChild);
};

<ul id="parentList">
    <li>First child</li>
    <li>Second child</li>
    <li>Third child</li>
    <li>Forth child</li>
    <li>Fifth child</li>
</ul>
<button type="button" id="delete">Delete first child</button>

【讨论】：