document.execCommand搭配addEventListener失效，内联JavaScript可正常运行

我之前做富文本编辑的时候也踩过这个坑！问题的核心其实很直观：当你点击按钮触发addEventListener绑定的事件时，浏览器会自动把焦点从你的可编辑区域转移到按钮上——而document.execCommand必须依赖当前有焦点的可编辑元素才能生效，没焦点的话命令当然执行失败。

至于内联onclick能正常工作，其实是浏览器处理内联事件的时机比较特殊，焦点还没完全从可编辑区域移走，但这不是稳定的行为，不能依赖。

快速修复方案 #

首先，先拿到你的可编辑区域DOM节点（比如那个设置了contenteditable="true"的元素）：

const editableArea = document.getElementById('your-editable-id');

然后在按钮的点击事件里，先让可编辑区域重新获取焦点，再执行命令：

const btn = document.getElementById('click');
btn.addEventListener('click', function(){
  // 先让可编辑区域聚焦，确保命令能作用到它上面
  editableArea.focus();
  // 执行bold命令，第三个参数可以传null（默认值）
  const commandSuccess = document.execCommand("bold", false, null);
  console.log(commandSuccess);
});

额外提醒 #

• document.execCommand已经是废弃API了，虽然现在主流浏览器还兼容，但从长期维护角度，建议换成Selection API和Range API来实现富文本编辑功能。不过如果只是临时解决当前问题，上面的方法完全够用。
• 调试的时候可以用document.activeElement查看当前焦点在哪，能帮你快速定位这类焦点相关的问题。

内容的提问来源于stack exchange，提问作者arman rozika