可编辑 div 元素内的鼠标事件

Question

我正在开发一个简单的 html 文本编辑器，我使用一个将 contenteditable 设置为 true 的 div 来实现这一点。

我有一些按钮（粗体、斜体、...）可以让用户修改文本。我想根据每个命令的状态更新这些按钮的状态，因此如果光标位于粗体文本内，则按钮的图像应显示粗体已打开。

我可以通过 keyup 事件来实现这一点，所以在每次 keyup 时我都会检查所有命令的状态并更新按钮。

但是，当用户单击 div 的一部分时，我也希望能够做到这一点。我尝试了 div 的 mouseup 和 click 事件，但它们仅在 div 被选中时触发，而不是在它的内容被选中时触发。

有没有办法在 div 元素中捕获鼠标事件，以便我可以更新按钮？

Answer 1

如果我正确理解您的问题，只需为文档中的所有 b 或强标签（无论您使用哪个标签）创建一个点击事件。如果 div 之外有粗体文本，请使用带有 css 样式的 spans font-weight:bold;。