Question

首先，这可能仅适用于Firefox，但我不确定。让我们从一些代码开始：

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Editor</title>
    <!-- styling -->
</head>
<body>
    <button id="bold" onclick="executeAction('bold')"  >
        Bold
    </button>
    <div id="italic"  onclick="executeAction('italic')">
        Italic
    </div>
    <div id="editor" contentEditable="true">
        Editor
    </div>
    <script>
        function executeAction(actionName) {
            console.log(actionName);
            var sup = document.queryCommandSupported(actionName);
            console.log(sup);
            var res = document.execCommand(actionName, false, "");
            console.log(res);
        }
    </script>
</body>
</html>

所以这是有趣的部分：请注意，粗体是按钮，而斜体是 div 。支持这两个命令，因为可以在控制台日志中检查或通过更改其中一个操作，因此这是唯一的区别。但是，按钮执行它应该执行的操作（它将“编辑器”中的选定文本更改为粗体），而 div 则不会。

控制台日志显示从 div 执行的 execCommand 返回false，根据文档，这实际上是一个非常详细的错误消息，说“出了问题，我们不能再打扰你了。“

可悲的是，即使我获得了所有信息，我也无法弄清楚为什么元素的行为会有所不同。其中一个事件是否实际异步执行？按钮是否具有其他元素必须首先请求的特权？编辑API是否检查它的执行位置，以确保有一个“好”的用户界面？

Answer 1

在这两种情况下，功能都正确执行。我想这可能会发生：

单击button时，文本选择不会丢失，因此会应用效果。
单击div时，在调用函数之前选择将丢失，因此不会应用效果。

按钮和div的onclick事件有什么区别？

1 个答案: