Javascript 在contentEditable上使用元素需要单击两次才能进行第一次编辑

我试图编辑表中的数据，并选择在

中的div上使用contentEditable，我遇到了一个非常奇怪的问题。当我第一次编辑它时，我必须点击两次，每隔一次，我只需要点击一次。但在第一次尝试编辑时，我必须点击两次。下面是我的HTML中的一个示例表行：

<tr style="width:100%"> <td><div class="results" onblur="blurMe(event)" onclick="darkenBox(event)" onkeypress="enterKey(event)" >Adam McGurk</div></td><td><div class="results" onblur="blurMe(event)" onkeypress="enterKey(event)" onclick="darkenBox(event)">amcgurk@shinesolar.com</div></td><td class="delete-sales-person"><span class="delete-icon"></span></td></tr>

---

为什么需要我单击两次才能第一次编辑？

您的div开始时没有内容可编辑集。当您（第一次）单击它们时，您会将contenteditable设置为true，但单击已被处理，因此不会触发编辑。 只有在下一次单击时，浏览器才允许编辑，因为现在contenteditable为true

---

直接在html中将contenteditable设置为true，应该可以工作。

第一次单击它时，它会将

contenteditable

设置为

true

。单击“离开”并不会取消设置。第二次单击时，

contenteditable

仍然是

true

。这允许您激活图元并立即对其进行编辑。如果要在第一次单击时对其进行编辑，可以启用所有要编辑的元素，从

contenteditable

开始。或者，您可以在启用

contenteditable

后聚焦元素

ele.setAttribute("contenteditable", true);
ele.focus();

另一方面，这在firefox上目前根本不起作用，我建议您使用

e.target

而不是

e.path[0]

ele.setAttribute("contenteditable", true);
ele.focus();