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

Question

I've looked at the other answers on this site and have found none of any use to me. If you think I might have overlooked something, let me know!

Anyway, I would like to create a range based on mouse position. I would like it to work exactly the way it works for left mouse button. You click in the DOM, it drops a text cursor, you drag, and the range object updates the selection object live and you get your "selection".

I, however, cannot find a way to get it to work with any other mouse button or keyboard key.

What is LMB doing that gives it this ability? I can't seem to find the answer anywhere.

Any suggestions?

On a similar note, would it be possible to develop something that could have accuracy down to the character in a childNode of a DOM element parentNode, so that as you mouse over, the character is displayed in console?

Answer 1

It's possible and I've posted code to create a range from a mouse event on Stack Overflow before:

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

Here's a demo that allows selection with the right mouse button:

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

It includes code from the linked answer plus the following:

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;
    }
};