Tengo un div y tiene algunos elementos dentro. Lo que quiero lograr es que cuando un usuario haga doble clic en un elemento dentro del div, se establezca como contentEditable . Por ejemplo: si un usuario hace doble clic en una etiqueta p , se vuelve editable y tan pronto como hace clic en cualquier lugar fuera de esa etiqueta, establece contentEditable en falso .
Pero lo que sucede es que cuando hago doble clic en la etiqueta p , se vuelve editable, pero cuando hago clic en cualquier lugar fuera de ese elemento, no se establece en falso y solo se establece en falso cuando hago clic en la misma etiqueta p nuevamente. . Lo cual es muy extraño. ¿Qué estoy haciendo mal aquí?
Aquí está mi código:
<html> <body> <div id="zzz"> <h1>Welcome</h1> <p>this is the text</p> <button>click me</button> <u>yo</u> </div> </body> <script> let arr = []; let myiframe = document.getElementById("zzz"); myiframe.addEventListener("click", function (e) { obj = e.target; arr.push(obj); console.log(arr); if (arr.length > 2) { arr.shift(); } if (arr[0] == arr[1]) { console.log("same"); } else { console.log("different"); obj.contentEditable = "false"; } if (event.detail === 2) { obj.contentEditable = "true"; obj.focus(); } }); </script> </html>Si cambia obj.contentEditable = "false"; a arr[0].contentEditable = "false" luego, al hacer clic, verificaría si los elementos coinciden y, de no ser así, deshabilitaría la propiedad de los elementos.
Creo que solo necesita almacenar un solo elemento en la memoria, que es el último elemento editable. .setAttribute y lo hice funcionar
let arr = []; let myiframe = document.getElementById("zzz"); let activeElement = null myiframe.addEventListener("click", function(e) { obj = e.target; //console.log(activeElement) if (activeElement && activeElement !== obj) { activeElement.setAttribute('contenteditable', 'false'); } if (event.detail === 2) { obj.setAttribute('contenteditable', 'true'); activeElement = obj obj.focus(); } }); <div id="zzz"> <h1>Welcome</h1> <p>this is the text</p> <button>click me</button> <u>yo</u> </div>e.target es el elemento en el que hizo clic, por lo que cuando hace clic en un elemento y modifica obj.contentEditable , solo está modificando la propiedad contentEditable de ese elemento.