Toggle contentEditable on click

I'm trying to make a div contentEditable when it is clicked, and then set contentEditable to false on mouseout, but I've had no success so far. Clicking a link appears to highlight it, but otherwise does nothing at all:

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

<div id="content" contentEditable="true"
     onclick = "this.contentEditable = true;" 
     onmouseout = "this.contentEditable = false;">
  Surprisingly, 
  <a href="http://google.com">clicking this link does nothing at all.</a> 
  How can I fix this problem?
</div>

I expected the link to take me to the linked page when it was clicked, but instead, it was highlighted when clicked and did nothing else. How can I fix this problem?

Don't ever use inline html script declaration, thats a bad practice. I think the reason your link doesn't do anything is, that the event listener bubbled/propagated over it and changed its default onclick event, when you set it for your div.

I suggest you do something like this.

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

<div id="content">
    <span id='editable'>Surprisingly,</span>
    <a href="http://google.com">clicking this link does nothing at all.</a>
</div>