停止单击取消选择的文本答案

【问题标题】：Stop clicking on text from cancelling selection停止单击取消选择的文本
【发布时间】：2014-06-02 23:51:16
【问题描述】：

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

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

你可以看到jsfiddle here

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

【问题讨论】：

标签： javascript html css selection contenteditable

【解决方案1】：

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

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

FIDDLE

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

FIDDLE

【讨论】：