停止点击取消选择的文字

Question

我试图制作一个简单的富文本编辑器，而我却陷入最愚蠢的境地。对于粗体按钮，我没有使用按钮，而是试图使其靠近屏幕顶部有几个跨度，每个跨度都可以对文本执行操作，例如bold，italic，underline等等，如果contenteditable div中的所选文字为粗体，斜体或下划线，则单击其中一个我希望它切换。基本上，我只想点击一个跨度来切换那些东西，而不是按钮。

所以我在正确的位置放了一大堆空间，并在其上放置了执行相应execCommand的事件处理程序。但是，当用户单击跨度时，它会取消contenteditable div中的选择，因此execCommand不会执行任何操作。我尝试将css user-select设置为none（我也使用了前缀），取消了selectstart事件，取消了click事件，但是当我点击时它仍然会取消选择在它上面

您可以看到jsfiddle here

我不想使用按钮而不是跨度或任何东西。我不想以一种黑客的方式做这件事（例如在输入时复制选择，然后在点击后重新创建选择）

Answer 1

有几种方法可以实现这一目标。您可以阻止默认的mousedown行为，如下所示：

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

FIDDLE

您也可以使用语义上正确的元素，例如<button>而不是<span>。如果您不喜欢<button>元素默认情况下的样式，只需重新设置样式。

FIDDLE