如何让contenteditable的div 在点击其他div的时候不失焦

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

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

    $('<div>').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_div = $('<div>')
    .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_div)
    .click(function(){
        set_style(document, 'underline', null);
    })

    return editor_main_div;
}
</script>

只要把包含按钮的那个节点的类型改成button就行了

【热门文章】