为什么在选择开始时使用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 - 例如，您可以选择表格的列或使用CTRLkey 添加更多选择。

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