我正在尝试制作一个简单的RTF编辑器,但是我被最愚蠢的事情所困扰.对于粗体按钮,我尝试使其不具有按钮,以使其在屏幕顶部附近具有多个跨度,并且每个跨度都有一个您可以对文本执行的操作,例如粗体,如果您在contenteditable div中选择的文本为粗体,斜体或下划线,则单击它时,我希望它切换.基本上,我想单击按钮来代替这些按钮,而不是按钮.

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

你可以看到jsfiddle here

我不想使用按钮而不是跨度或其他任何东西.我不想以一种不客气的方式做到这一点(例如复制输入中的选择,然后在单击后重新创建选择)

解决方法:

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

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

FIDDLE

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

FIDDLE