CONTENTEDITABLE切换上点击(Toggle contentEditable on cli

我试图让一个div CONTENTEDITABLE被点击它，然后CONTENTEDITABLE设置为false鼠标移开，但到目前为止，我没有成功。 点击一个链接出现，突出它，否则什么事情都不：

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>

我希望把我的链接页面被点击时的链接，而是点击，什么也不做，当它被高亮显示。 我怎样才能解决这个问题呢？

Answer 1:

千万不要用内嵌HTML脚本声明，那是一个糟糕的做法。 我想你的链接不会做任何事情的原因是，该事件侦听器冒泡/传播它，并改变其默认onclick事件，当你将它设置为你的股利。

我建议你做这样的事情。

        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>

Answer 2:

 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');
    }
    });

Answer 3:

尝试将目标设置为blank ：

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

文章来源: Toggle contentEditable on click