停止点击文本以取消选择

Question

我正在尝试制作一个简单的富文本编辑器，但我卡在了最愚蠢的地方。对于加粗按钮，我想做的不是一个实际的按钮，而是在屏幕顶部附近放置几个span，每个span都有一些可以应用到文本上的操作，例如bold，italic，underline等等。当你点击其中一个时，如果在contenteditable div中选择的文本是粗体、斜体或下划线，我希望它会切换这些属性。基本上，我想要的不是按钮，而是只需单击一个span就可以切换这些属性。

因此，我在正确的位置放置了许多spans，并为它们设置了事件处理程序，执行适当的execCommand。然而，当用户点击span时，它会取消contenteditable div中的选定文本，导致execCommand无法执行任何操作。我尝试将css的user-select设置为none（我也使用了前缀），取消了selectstart事件和click事件，但仍然会在单击时取消所选内容。

您可以在这里查看jsfiddle 链接

我不想使用按钮代替span或其他任何东西。我也不想以hacky的方式来做（例如在输入时复制选择内容，然后在单击后重新创建选择内容）

- markasoftware

Answer 1

有几种方法可以实现这一点。您可以像下面这样防止默认的mousedown行为：

document.getElementById('bold').addEventListener('mousedown', function (e) {
    e.preventDefault();
});

FIDDLE

你也可以直接使用语义化正确的元素，例如<button>而不是<span>。如果您不喜欢<button>元素默认的外观，只需重新定义样式即可。

FIDDLE

- plalx