javascript - 停止单击取消选择的文本

Question

我正在尝试制作一个简单的富文本编辑器，但我陷入了最愚蠢的事情。对于粗体按钮，我没有使用按钮，而是试图让它在屏幕顶部附近有几个跨度，每个跨度都有你可以对文本做的事情，比如 bold ， italic 、 underline 等，当您单击其中一个时，如果 contenteditable div 中的选定文本是粗体、斜体或下划线，我希望它切换。基本上，我不想点击按钮，而是想简单地点击一个 span 来切换这些东西。

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

可以看到jsfiddle here

我不想使用按钮代替 span 或其他任何东西。我也不想以一种 hacky 的方式来做这件事(比如在输入时复制选择，然后在点击后重新创建选择)

Answer 1

有几种方法可以实现这一点。您可以阻止默认 mousedown行为如下:

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

FIDDLE

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

FIDDLE