如何使元素在 JavaScript 中恢复为不可编辑?

Question

>我正在尝试制作一个用户制作的列表，它完成了它应该做的大部分事情。不过，我注意到的一件事是，当我单击其中一个列表项上的编辑按钮时，它在整个会话中仍然是可编辑的。我希望当用户单击该编辑按钮或目标列表项以外的其他元素时，它不再可编辑。

.HTML：

<ul id="todoList">
<li v-for="item in items" contenteditable="false" id="item">{{item}}
<div></div>
<button id="editButton" contenteditable="false" onclick="edit(event)">Edit</button>

.JS：

var editB=document.getElementById("editButton");
var tdList=document.getElementById("todoList");
var listItem = document.getElementById("item");
function edit(event) {
var button = event.target,
li = button.parentNode;
li.setAttribute("contenteditable", true);
}

Answer 1

假设你没有使用jQuery，你可以侦听待办事项列表中的mousedown事件并重置每个"可编辑"项目，除非你点击带有node.addEventListener的按钮：

var editB=document.getElementById("editButton");
var tdList=document.getElementById("todoList");
var listItem = document.getElementById("item");
function contentEditable(node) {
node.setAttribute("contenteditable", true);
}
function edit(event) {
var button = event.target,
li = button.parentNode;
contentEditable(li);
}
tdList.addEventListener('mousedown', function(event) {
var editable = document.querySelectorAll("li.item");
var target = event.target;
var id = target.getAttribute("id");
editable.forEach(function(li){
li.setAttribute("contenteditable", false);
})
if(id == "editButton") {edit(event)}
if(id == "item") {contentEditable(target)}
})

您还需要一种方法来查询"当前可编辑"的内容。我在 li 中添加了一个选择器，并从按钮中删除了contenteditable属性：

<ul id="todoList">
<li v-for="item in items" class="item" contenteditable="false" id="item">Item
<div></div>
<button id="editButton">Edit</button>
</li>
</ul>

JSFiddle在这里尝试一下

我希望这有帮助！

Answer 2

我希望它像你预期的那样工作。您可以单击外部文本或打开按钮以禁用编辑。

var editB = document.getElementById("editButton");
var tdList = document.getElementById("todoList");
var listItem = document.getElementById("item");
var inEdit = false;
function edit(event) {
var button = event.target,
li = button.parentNode;
inEdit = !inEdit;
li.setAttribute("contenteditable", inEdit);
}
document.addEventListener('mouseup', function(event) {
if (event.target.getAttribute == "editButton" || !event.target.hasAttribute("contenteditable")) {
var lists = document.querySelectorAll("[contenteditable='true']");
for (var i = 0; i < lists.length; i++) {
lists[i].setAttribute("contenteditable", false);
}
}
});

<ul id="todoList">
<li v-for="item in items" contenteditable="false" id="item">{{item}}
<button id="editButton" onclick="edit(event)">Edit</button>
</li>
</ul>