Toggle contentEditable on click

Estoy tratando de hacer que un contenido div sea editable cuando se haga clic en él y luego establezca contentEditable en falso en el mouseout, pero hasta ahora no he tenido éxito Al hacer clic en un enlace aparece para resaltarlo, pero de lo contrario no hace nada:

http://jsfiddle.net/GeVpe/19/

Surprisingly, clicking this link does nothing at all. How can I fix this problem?

Esperaba que el enlace me llevara a la página vinculada cuando se hacía clic, pero en su lugar, estaba resaltado cuando se hacía clic y no hacía nada más. ¿Como puedo solucionar este problema?

Nunca use la statement de script html en línea, eso es una mala práctica. Creo que la razón por la que su enlace no hace nada es que el oyente del evento burbujeó / propagó sobre él y cambió su evento onclick predeterminado, cuando lo configuró para su div.

Te sugiero que hagas algo como esto.

  window.onload = function() { var div = document.getElementById('editable'); div.onclick = function(e) { this.contentEditable = true; this.focus(); this.style.backgroundColor = '#E0E0E0'; this.style.border = '1px dotted black'; } div.onmouseout = function() { this.style.backgroundColor = '#ffffff'; this.style.border = ''; this.contentEditable = false; } } // And for HTML  
  Here we can make html element editable true and false using this code. $( "#mylabel" ).click(function() { // we get current value of html element var value = $('#editablediv').attr('contenteditable'); //if its false then it make editable true if (value == 'false') { $('#editablediv').attr('contenteditable','true'); } else { //if its true then it make editable false $('#editablediv').attr('contenteditable','false'); } }); 

Intenta establecer el objective en blank :

 
Surprisingly, clicking this link does nothing at all. How can I fix this problem?