javascript - 为什么在选择开始时使用 removeAllRAnges()？

Question

我有这段代码，我只是想了解为什么我需要在开始时使用 removeAllRanges。 sel 是否在初始化时自动包含范围？

function setCaret(boolean_position) {
   var range = document.createRange();
   var sel = window.getSelection();
   range.selectNodeContents($('#board_code')[0]);
   range.collapse(boolean_position);
   sel.removeAllRanges();
   sel.addRange(range);//setting the caret position
} 

Answer 1

是的，从 window.getSelection() 检索的选择不是像 document.createRange() 创建的范围那样的空实例。请注意这些方法名称的区别 - 一个创建新实例，第二个获取实例。

原因很简单——您可以有多个范围实例，每个实例包含不同的位置。但是每个文档只有一个选择。

因此，在添加范围之前，通常您必须删除当前选择的旧范围。当然，除非您想扩展当前选择。

更新:正如 Tim 正确指出的那样，只有 Firefox 支持多个选择范围。这意味着只有在 Firefox 上，您才能一次选择多个 DOM——例如您可以选择表格的列或使用 CTRL 键添加更多选择。

因此，只有 Firefox 要求您在添加下一个之前执行 removeAllRanges()。其他浏览器会自动删除旧范围。