要素を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のを使用していない、あなたはToDoリストに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 here to try it out

を！

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>