点击切换内容可编辑

Question

我试图在单击时使 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 脚本声明，这是一个不好的做法。我认为您的链接不执行任何操作的原因是，当您为 div 设置事件侦听器时，事件侦听器在其上冒泡/传播并更改了其默认的 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>