document.caretPositionFromPoint抓得太高 [英] document.caretPositionFromPoint grabbing too high

问题描述

我正在为我的"jump-to-anchor"附加组件进行更新是Firefox的附加组件，可让您右键单击文档中的某个位置，以(希望)获得距点击点最近的锚点.

I'm working on an update to my "jump-to-anchor" add-on which is a Firefox add-on to let you right-click somewhere in a doc to (hopefully) get the closest anchor above the click point.

提交附加组件之后，我意识到我可以通过找到实际单击的文本节点并从那里查找(而不是当前单击元素的第一个子节点)来改进算法.但是，在我的测试中(相对于我碰巧正在阅读的一页， http://tools.ietf.org/html/rfc5323#section-2.3.2 )，通过

After submitting the add-on, I realized I could improve the algorithm by finding the actual text node where clicked, and look up from there (instead of the first children of the current clicked element). However, in my tests (against a page I happened to be reading, http://tools.ietf.org/html/rfc5323#section-2.3.2 ), the text node grabbed via document.caretPositionFromPoint is higher than expected.

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/安装XPI跳转至锚点/tree/document.caretPositionFromPoint (或将cfx xpi与SDK一起从源代码安装)
2. 转到 http://tools.ietf.org/html/rfc5323#第2.3.2节
3. 请尝试在第2.3.3节(请注意:2.3.3)中单击鼠标右键，然后查看它通常一直到#page-10"锚点而不是#section-2.3.3"锚点.

1. Install the XPI from https://github.com/brettz9/jump-to-anchor/tree/document.caretPositionFromPoint (or use cfx xpi with SDK to install from source)
2. Go to http://tools.ietf.org/html/rfc5323#section-2.3.2
3. Try right-clicking within section 2.3.3 (note: 2.3.3) and see it often go all the way up to the "#page-10" anchor instead of the "#section-2.3.3" anchor.

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

(In the current code at Github, I have the e.button === 2 check commented out, but the result is the same.)

推荐答案

原来，有关MDN的文档是完全错误的. .caretPositionFromPoint期望您相对于当前视口传递坐标.

Turns out that the documentation on MDN is outright wrong. .caretPositionFromPoint expects that you pass coordinates relative to the current viewport.

因此，您必须使用e.clientX/e.clientY！

此外，.mozInnerScreenX/Y并没有执行您可能期望的操作.如果要检查x和y是视口内的有效坐标，请使用window.innerWidth/.innerHeight.

Also, .mozInnerScreenX/Y doesn't do what you might expect it to do. Use window.innerWidth/.innerHeight if you want to check that x and y are valid coordinates within the viewport.

所以这是我尝试过的方法，并且似乎起作用了(摘录):

So here is what I tried and what seems to have worked (excerpt):

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;
    // ...
});

这篇关于document.caretPositionFromPoint抓得太高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！