document.caretPositionFromPoint抓得太高

Question

我正在对我的“跳到锚”进行更新，这是一个火狐插件，允许您在文档中的某个地方右键单击，以便(希望)在点击点上方找到最近的锚。

在提交加载项之后，我意识到我可以通过找到单击的实际文本节点来改进算法，然后从那里查找(而不是当前单击元素的第一个子节点)。然而，在我的测试中(针对我正在阅读的页面，https://www.rfc-editor.org/rfc/rfc5323#section-2.3.2 )，通过document.caretPositionFromPoint获取的文本节点比预期的要高。

var x = 0, y = 0;
window.addEventListener('click', function (e) {
    if (e.button === 2) { // Avoid grabbing for the actual selection // Doesn't seem to execute on the final context menu click anyways
        x = e.pageX;
        y = e.pageY;
    }
});
self.on('click', function () { // , data
    // I added the next two lines just in case the user clicked off screen
    x = x > window.mozInnerScreenX ? window.mozInnerScreenX : (x < 0 ? 0 : x);
    y = y > window.mozInnerScreenY ? window.mozInnerScreenY : (y < 0 ? 0 : y);
    var caretPosition = document.caretPositionFromPoint(x, y);
    var node = caretPosition.offsetNode;

    // Doesn't grab the right node.nodeValue here always--seems to grab too high up

    // (Then search the node for an anchor, or recursively check the deepest child of the previous element sibling on up and keep looking for previous element siblings.)
});

听起来像虫子？

更新：

复制步骤：

1. 从https://github.com/brettz9/jump-to-anchor/tree/document.caretPositionFromPoint安装XPI (或使用cfx xpi与SDK一起从源代码安装)
2. 转到https://www.rfc-editor.org/rfc/rfc5323#section-2.3.2
3. 尝试右击第2.3.3节(注: 2.3.3)，并经常看到它一直走到"#page-10“锚，而不是”#节-2.3.3“锚。

(在Github的当前代码中，我已将e.button === 2检查注释掉，但结果是相同的。)

Answer 1

事实证明，有关MDN的文档是完全错误的。.caretPositionFromPoint期望传递相对于当前视图的坐标。。

所以您必须使用e.clientX/e.clientY！

而且，.mozInnerScreenX/Y并不像您所期望的那样。如果要检查视图中的window.innerWidth和y是否有效，请使用x /y。

下面是我尝试过的和似乎行之有效的内容(摘录)：

var x = 0, y = 0;
window.addEventListener('click', function (e) {
        x = e.clientX;
        y = e.clientY;
});
self.on('click', function () { // , data
    x = Math.max(0, Math.min(innerWidth, x));
    y = Math.max(0, Math.min(innerHeight, y));
    var caretPosition = document.caretPositionFromPoint(x, y);
    var node = caretPosition.offsetNode;
    // ...
});