如何从点(X 和 Y 坐标）创建范围对象

How to create a Range Object from a point (X and Y Coordinates)?

本文关键字：坐标 创建 范围 对象      更新时间：2023-09-26

我查看了这个网站上的其他答案，发现对我没有任何用处。如果您认为我可能忽略了某些内容，请告诉我！

无论如何，我想根据鼠标位置创建一个范围。我希望它完全按照鼠标左键的工作方式工作。您在 DOM 中单击，它会放下文本光标，拖动，范围对象实时更新选择对象，您将获得"选择"。

但是，我找不到一种方法来使其与任何其他鼠标按钮或键盘键一起使用。

LMB在做什么赋予它这种能力？我似乎在任何地方都找不到答案。

有什么建议吗？

同样，是否有可能开发一些可以精确到 DOM 元素 parentNode 的子节点中的字符的东西，以便当您将鼠标悬停在控制台上时，该字符会显示在控制台中？

这是可能的，我之前已经发布了代码来从堆栈溢出上的鼠标事件创建一个范围：

https://stackoverflow.com/a/12924488/96100

这是一个允许使用鼠标右键进行选择的演示：

http://jsfiddle.net/timdown/BpjyG/6/

它包括链接答案中的代码以及以下内容：

var anchorRange;
function mouseMove(evt) {
    evt = evt || window.event;
    var range = getMouseEventCaretRange(evt), sel, selRange;
    if (typeof range.setEndPoint != "undefined") {
        // Old IE
        selRange = anchorRange.duplicate();
        selRange.setEndPoint("EndToEnd", range);
        if (selRange.text == "") {
            // Try the other way round
            selRange = anchorRange.duplicate();
            selRange.setEndPoint("StartToStart", range);
        }
        selRange.select();
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel.extend) {
            // This is ideal: we can create forwards and backwards selections
            // simply by moving the focus using extend()
            sel.extend(range.startContainer, range.startOffset);
        } else {
            // We'll need to create a range and test for backwardsness
            selRange = document.createRange();
            selRange.setStart(sel.anchorNode, sel.anchorOffset);
            selRange.setEnd(range.startContainer, range.startOffset);
            if (selRange.collapsed) {
                // Try the other way roound
                selRange.setStart(range.startContainer, range.startOffset);
                selRange.setEnd(sel.anchorNode, sel.anchorOffset);
            }
            selectRange(selRange);
        }
    }
}
function mouseUp(evt) {
    evt = evt || window.event;
    if (evt.button == 2) {
        if (document.releaseCapture) {
            document.releaseCapture();
        }
        document.onmousemove = null;
        document.onmouseup = null;
        anchorRange = null;
    }
}
document.oncontextmenu = function() {
    return false;
};
document.onmousedown = function(evt) {
    evt = evt || window.event;
    if (evt.button == 2) {
        rightMouseButtonDown = true;
        var range = getMouseEventCaretRange(evt);
        anchorRange = range;
        selectRange(range);
        if (document.body.setCapture) {
            document.body.setCapture();
        }
        document.onmousemove = mouseMove;
        document.onmouseup = mouseUp;
        return false;
    }
};
相关文章：