在可满足的上使用元素需要单击两次编辑

Question

我正在尝试编辑保存在表中的数据，并选择在<td> s内的DIV上使用可满足的数据，并且我遇到了一个非常奇怪的问题。当我第一次进行编辑时，我必须每隔一次点击两次，此后每隔一次我只需要单击一次即可。但是，在第一次尝试编辑时，我必须单击两次。这是我的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)">[e-mail]</div></td><td class="delete-sales-person"><span class="delete-icon"></span></td></tr>

这是适当的JS：

//Only to be used with changing data to gray on click and border on hover.
function darkenBox(e){
    const ele = e.path[0];
    ele.setAttribute("contenteditable", true);
    console.log("Editing cell data");
    ele.classList.add("darkenBox")
}
// Allows user to edit content by click
function clickEdit(e) {
    e.path[0].setAttribute("contenteditable", true);
}
//Deleted placeholder text on click
function clearText(e) {
    const ele = e.path[0];
    ele.setAttribute("contenteditable", true);
    ele.innerText='';
}
// Allows user to stop editing by pressing the, "Enter" key.
function enterKey(e){
    const keyCode = e.keyCode;
    const ele = e.path[0];
    if (keyCode === 13) {
        ele.classList.remove("darkenBox");
        ele.setAttribute("contenteditable", false);
    }
}
function blurMe(e) {
    const editedElement = e.path[0];
    editedElement.classList.remove("darkenBox");
}

为什么要求我单击两次以第一次编辑？

Answer 1

第一次单击它时，它将contenteditable设置为true。单击不设置并不确定。您第二次单击时，contenteditable仍然是true。这使您可以激活元素并立即对其进行编辑。如果要在第一次单击时进行编辑，则可以将所有打算编辑的元素开始使用contenteditable启用。或者，启用contenteditable后，您可以集中元素。

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

在不相关的注意事项上，目前这在Firefox上根本无法使用，我建议您使用e.target而不是e.path[0]。

Answer 2

您的div启动而没有可满足的集合。当您单击它们（第一次）时，您将可满足的内容设置为True，但是单击已经处理，因此不会触发编辑。仅在下一键点击时，浏览器将允许编辑，因为现在可满足的是TRUE。

将可满足的内容设置为直接在html中的true，应起作用。