document.execCommand只适用于按钮而不是链接？

Question

我有以下代码：

<div contenteditable="true" style="height:100px;width:100px;border:1px solid; " class="editor"></div>
<a class='bold' style="height:10px;width:10px;">B</a> 

$(function(){
    $("a.bold").on("click",function(){
        document.execCommand('bold',false,true);
    }) 
})

当我点击B链接时，contenteditable div中的内容没有胆量。从这里的jsfiddle可以看出http://jsfiddle.net/JeremyHuang_Stern/487YF/

然而，当我使用按钮而不是链接来做同样的事情时，问题就消失了。从这个小提琴可以看出http://jsfiddle.net/JeremyHuang_Stern/2QG26/

造成这种差异的原因是什么？

Answer 1

该链接会从mousedown上的文字中窃取选择内容。防止默认行为以避免这种情况。

$('a.bold').on('mousedown', function(event) {
    event.preventDefault();
    document.execCommand('bold', false, false);
});