铬松散选择上的粗下划线、粗体或意大利

Question

在可编辑的内容上，我在顶部放置了 3 个按钮：B、I、U

在 Firefox 上它可以正常工作，但在 Chrome 上，在我到达事件的功能之前，似乎点击时选择丢失了。

<i class="fa-bold">B</i>
<div contenteditable="true" id="theelement"></div>
<script>
$('.fa-bold').click(function (){
  var s = rangy.getSelection( document.getElementById('theelement') );
  var r = s.getRangeAt(0);

  rangy.createClassApplier('bold').toggleRange(r);
});
</script>

如果你从控制台运行它，它可以工作，如果你点击它没有的按钮，这只发生在 Chrome 上，在按钮上的 FF 上工作正常。

Answer 1

使用 mousedown 而不是 click 作为事件来防止粗体按钮获得焦点并失去焦点。您可能需要从侦听函数中获取事件，以便防止默认行为。