Прежде всего, это может относиться только к Firefox, но я не уверен. Давайте начнем с некоторым кодом:В чем разница между событиями onclick кнопок и divs?
<!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 - нет.
Журнал консоли показывает, что ExecCommand выполнен из DIV возвращает ложь, которая, согласно документации, на самом деле очень подробное сообщение об ошибке сказав «что-то пошло не так, и мы не могли быть обеспокоены, чтобы сказать вам больше ».
К сожалению, даже со всей информацией, которую я получаю, я не могу понять, почему элементы ведут себя по-разному. Является ли одно из событий фактически выполненным асинхронно? У кнопок есть особые привилегии, которые должны запрашивать другие элементы? Проверяет ли API редактирования, где он был выполнен, чтобы убедиться, что есть «хороший» интерфейс?
'div'" крадет "фокус от выбора до вызова обработчика, а' button' - нет. – Teemu