6

クリックされたときに 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>

リンクをクリックするとリンク先のページに移動すると思っていましたが、クリックすると強調表示され、他に何もしませんでした。この問題を解決するにはどうすればよいですか?

4

3 に答える 3

4

インライン 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>
于 2013-04-13T22:00:40.987 に答える
1

ここで、このコードを使用して、html 要素を true および false で編集可能にすることができます。

    $( "#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');
    }
    });
于 2016-12-16T07:16:10.830 に答える
0

ターゲットを次のように設定してみてください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>
于 2013-04-14T00:25:25.707 に答える