Javascript 从Firefox中的内容可编辑div获取范围不起作用

在我们的项目中，我们有一个内容可编辑的div和另一个div，它作为一个按钮来显示一些选项。用户选择其中一个选项，该值将插入内容可编辑div的插入符号处。因此，我尝试从内容可编辑div中获取所选范围值，以在插入符号处插入值文本

我在content editable div上使用模糊事件来实现它，以在失去焦点之前获得选择，保存范围数据并在div click事件上使用它。在Chrome/Edge中工作正常，但在Firefox/Safari中则不然

我不明白的是，当使用输入按钮时，它在所有浏览器中都有效，但当使用div作为按钮时，它在Firefox/Safari中不起作用

JSFiddle：

守则：

HTML

要复制它：

在content-editable div中编写一些内容 选择一些文本 单击按钮->所选范围数据正确显示在输入中 再次选择一些文本 单击div按钮->输入中显示0 有人知道为什么吗？是否有任何方法可以使用div按钮获取正确的范围数据

---

谢谢

我通过在按钮和div上拆分事件侦听器，然后单击鼠标向下移动，从而使其正常工作

<script type="text/javascript">
var start = 0,
    end = 0;

$(() => {
    $('#selection-div').on('mousedown', getSelection);
    $('#selection-button').on('click', getSelection);

    function getSelection() {
        var range = window.getSelection().getRangeAt(0);
        var preSelectionRange = range.cloneRange();
        preSelectionRange.selectNodeContents(document.getElementById('editor'));
        preSelectionRange.setEnd(range.startContainer, range.startOffset);
        start = preSelectionRange.toString().length;
        end = start + range.toString().length;

        $('#start').val(start);
        $('#end').val(end);
        // Not needed, as you would override it on every click
        //start = 0;
        //end = 0;
    }
})
</script>

---

为什么开始=0；结束=0；在内部单击操作？只需查看选择值不是从按钮获得的值。这只是一个重置。

var start = 0,
end = 0;

// On clicking on the button or the div, the editor div blur event is triggered.
// We get the range start and end, and store them.
$( "#editor" ).blur(function() {
  var range = window.getSelection().getRangeAt(0);
  var preSelectionRange = range.cloneRange();
  preSelectionRange.selectNodeContents(editor);
  preSelectionRange.setEnd(range.startContainer, range.startOffset);
  start = preSelectionRange.toString().length;
  end = start + range.toString().length;
});

// After the blur event is finished, the click event is triggered.
// Start and end values are displayed in the inputs
$('#selection-button, #selection-div').on('click', function() {
  $('#start').val(start);
  $('#end').val(end);
  start = 0;
  end = 0;
});

<script type="text/javascript">
var start = 0,
    end = 0;

$(() => {
    $('#selection-div').on('mousedown', getSelection);
    $('#selection-button').on('click', getSelection);

    function getSelection() {
        var range = window.getSelection().getRangeAt(0);
        var preSelectionRange = range.cloneRange();
        preSelectionRange.selectNodeContents(document.getElementById('editor'));
        preSelectionRange.setEnd(range.startContainer, range.startOffset);
        start = preSelectionRange.toString().length;
        end = start + range.toString().length;

        $('#start').val(start);
        $('#end').val(end);
        // Not needed, as you would override it on every click
        //start = 0;
        //end = 0;
    }
})
</script>