javascript - 如何让contenteditable的div 在点击其他div的时候不失焦-PHP中文网问答

在制作富文本编辑器的时候我是使用一个设置了contenteditable的p作为输入框在工具栏里有个让用户设置加粗与否的按钮如果这个按钮的类型是p的话那么只要我鼠标摁下去作为输入框的p就会发生失焦但是如果按钮的类型是button的话就不会失焦请问一下这个是什么原因怎么解决下面是测试代码只要将initEditor函数内的b_btn的节点类型改成p就会失败

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p></p>
    </body>
</html>
<script src='jquery.js'></script>
<script>
$(document).ready(function(){
    var editor = initEditor();
    editor.appendTo($(document.body));

    $('<p>').css({position:'absolute', left:100, top:10, width:200, height:200, border:'1px solid red'}).attr({contenteditable:true}).html('sdafasfsafd').appendTo(editor);
})
function set_style(doc, key, value){
    try{
        doc.execCommand(key, false, value);
    }catch(e){
        console.log(e);
        alert(e);
    }
}

function initEditor(){
    var editor_main_p = $('<p>')
    .css({
            position    : 'absolute'
        , left          : 0
        , top               : 0
    });

    var b_btn = $('<button>')
    .css({
            position                : 'relative'
        , cssFloat              : 'left'
        , width                     : 30
        , height                    : 30
        , backgroundColor   : 'blue'
    })
    .text('U')
    .appendTo(editor_main_p)
    .click(function(){
        set_style(document, 'underline', null);
    })

    return editor_main_p;
}
</script>