getBoundingClientRect

Initial fiddling around with trying to figure out how to find the DOM node closest to a mouse click.

HTML

<p id="active" contenteditable="true">This is stuff</p>
<button id="textoffset">Text Offset</button>
<p id="log"></p>

JavaScript

$(function () {
    var $log = $("#log");
    $("#active").mousedown(function (ev) {
        $log.append("X: " + ev.pageX);
        $log.append(" Y: " + ev.pageY);
        $log.append("<br>");
    });
    
    $("#textoffset").click(function(ev) {
        var range = document.getSelection().getRangeAt(0);
        var rect = range.getBoundingClientRect();
        console.log(rect);
        $log.append(["X", rect.left, "Y", rect.top, "X2", rect.right, "Y2", rect.bottom].join(" "));
        $log.append("<br>");
        return false;
    });
});