javascript - 获取相对于父元素的点击范围

所以我有这个问题，我需要获得相对于父元素的单击点偏移。
假设我有这样的html呈现：

<div>
   able   to   allocate   many   IPs.
   <span style="background: yellow">
      Proof-of-work   is   essentially   one-CPU-one-vote.
   </span>     The   majority
</div>

我想获得相对于父div的点击偏移量。例如，如果我单击跨度标签中的单词，则会得到单击相对于父Div的偏移量。我该如何实施。
我试图写这样的代码：

var selection = window.getSelection();
var range = selection.getRangeAt(0);
var offset = range.startOffset;

但这给了我相对于span标签的偏移量。那么如何获得相对于div标签的偏移量呢？

最佳答案

我不知道有任何内置函数可以测量Range相对于另一个元素的偏移量。您可以使用Range的startContainer属性，然后在DOM层次结构中向上爬行，并在进行操作时测量内容。

我在下面创建了一个演示。但是请注意，这可能会或可能不会完全产生您想要的结果。例如，这将测量注释和样式节点的长度，并且将计算所有空格字符，无论浏览器是否最终呈现它们。您可能需要进行调整以适合自己的目的，方法是在测量之前添加nodeType的检查，预折叠空格字符（也许使用正则表达式替换）等，但是我希望这是一个好的开始。

function clicked(){
  console.log( getSelectionOffsetRelativeTo( document.getElementById( 'parent' ) ) );
}

function getSelectionOffsetRelativeTo(parentElement, currentNode){

  var currentSelection, currentRange,
      offset = 0,
      prevSibling,
      nodeContent;

  if (!currentNode){
    currentSelection = window.getSelection();
    currentRange = currentSelection.getRangeAt(0);
    currentNode = currentRange.startContainer;
    offset += currentRange.startOffset;
  }

  if (currentNode === parentElement){
    return offset;
  }

  if (!parentElement.contains(currentNode)){
    return -1;
  }

  while ( prevSibling = (prevSibling  || currentNode).previousSibling ){
    nodeContent = prevSibling.innerText || prevSibling.nodeValue || "";
    offset += nodeContent.length;
  }

  return offset + getSelectionOffsetRelativeTo( parentElement, currentNode.parentNode );

}

Click inside the div:

<div id="parent" style="border: black 1px solid;" onclick="javascript:clicked();">

  Currently in the parent node.

  <span style="color: red;">In the first child span.</span>

  Back in the parent node.

  <span style="color: red;">In the second child span.

    <span style="font-style:italic;">In the grandchild span.</span>

  </span>

  Back in the parent node.

</div>

关于javascript - 获取相对于父元素的点击范围，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48810664/