Javascript 粗犷下划线、粗体或意大利镀铬宽松选择

在可编辑的内容上，我在顶部放置了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>

B
$（'.fa bold'）。单击（函数（）{
var s=rangy.getSelection（document.getElementById（'theelement'）；
var r=s.getRangeAt（0）；
rangy.createClassApplier（'bold'）.toggleRange（r）；
});

---

如果您从控制台运行它，它工作，如果您单击按钮它不工作，这只发生在Chrome上，在FF上，按钮工作正常。

使用鼠标向下而不是单击作为事件，以防止粗体按钮获得焦点，从而失去焦点。您可能需要从侦听函数获取事件，以便防止默认行为