javascript - 为什么我不能通过单击 DIV 来加粗文本？

Question

有人可以解释为什么单击按钮会触发 contentEditable div 中的浏览器编辑，但单击调用相同 execCommand 的 div 不会？在http://jsfiddle.net/GgX8G/3/我有一个按钮和一个 div 触发相同的代码，但只有按钮执行粗体动作：

<div id="boldB">B</div>
<button id="bld">B</button>

$(document).ready(function(){  
    $('#boldB').click(function() {
            document.execCommand('bold', false, null);
            alert("clicked the B div");
        });

    $('#bld').click(function() {
            document.execCommand('bold', false, null);
            alert("clicked the B button");
        });
}); 

谢谢

Answer 1

当您单击 adiv时，当前选定的div对象失去焦点，因此该execCommand函数无事可做。您需要更早地捕获事件（例如，在鼠标按下时）并阻止它。这里的例子：http: //jsfiddle.net/GgX8G/13/

逐行解释：

$('#boldB').mousedown(function(e) {

mousedown 事件在点击事件之前调用，在焦点改变之前，让我们有机会阻止它改变。

    e.preventDefault();

调用preventDefault事件对象会阻止后续的默认动作发生，即焦点的改变。

    document.execCommand('bold', false, null);

完成此操作后，您可以安全地execCommand使用div，因为它仍然是焦点并且选择是完整的。

Answer 2

在这里，试试这个http://jsfiddle.net/GgX8G/7/

你想要的 jquery 行是这样的：

$("#boldB").css("font-weight", "bold");