javascript - 如何查看用户选择是否在 HTML 范围内

Question

我正在开发一个 Firefox 插件，它可以转换用户通过用户选择突出显示的屏幕温度。转换后，用户选择将替换为 ID 为 alreadyconverted 的 span HTML 元素，其中包含原始温度和括号中的转换温度。代码中一个明显的错误是用户可以通过并选择转换后的温度并无限转换它。

我想要的是让我的 Javascript 代码检测用户选择何时包含在 span 元素内、与 span 元素重叠或包含整个 span 元素。我如何让 Javascript 检测用户何时选择了该 span 的全部或部分内容？

我在 StackOverflow 上看到了类似的问题，但它想知道用户选择何时完全包含在特定元素中。这不完全是我想要的，但我不确定我需要更改代码以使其满足我的需要。

查看该线程的 JS Fiddle:http://jsfiddle.net/eT8NQ/

Answer 1

查看 MDN 的 Select 文档，似乎已经直接支持此功能。参见 Selection.containsNode() .

我已经 updated your fiddle ，现在它会正确返回一个 bool 值，无论元素的任何部分是否在您的选择中。

function elementContainsSelection(el) {
  if (window.getSelection) {
    var sel = window.getSelection();
    if (sel.rangeCount > 0) {
      return sel.containsNode(el, true);
    }
  }
  return false;
}

除非设置了 aPartlyContained 标志，否则此函数默认返回 false。然后部分包含也将返回 true。

aPartlyContained

When true, containsNode() returns true when a part ofthe node is part of the selection.

When false, containsNode() onlyreturns true when the entire node is part of the selection.