所以我遇到了这个问题,我需要获取相对于父元素的点击点偏移量。 假设我有这样的 html 渲染:
<div>
able to allocate many IPs.
<span style="background: yellow">
Proof-of-work is essentially one-CPU-one-vote.
</span> The majority
</div>
我想获取click相对于父div的偏移量。例如,如果我单击 span 标签中的单词,我将获得单击相对于父 Div 的偏移量。我怎样才能实现这个。 我尝试编写这样的代码:
var selection = window.getSelection();
var range = selection.getRangeAt(0);
var offset = range.startOffset;
但这给了我相对于跨度标签的偏移量。那么如何获得相对于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/