javascript - 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/

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

是什么造成了这里的差异？

Answer 1

该链接窃取了 mousedown 上文本的选择。防止默认行为以避免这种情况。

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