mousemove + elementFromPoint でマウスカーソルが示すノードを取得

js DOM

mousemove と elementFromPoint を使うと、マウスカーソル直下のノードを取得できます。

デモ

http://pigs.sourceforge.jp/blog/20100401/test/uu.Class.ElementFromPoint.htm

IE6+, Safari3.1+, Firefox3+, Google Chrome4+, Opera9.5+ で動きます。

コード

// === elementFromPoint ===
//{{{!depend uu, uu.class
//}}}!depend

uu.Class.ElementFromPoint || (function(win, doc, uu) {

// client coordinates
//      true:  Safari3x, Safari4, Opera9.x, Opera10.10
//      false: IE, Gecko, Chrome4, Opera10.50
var _clientCoordinates = uu.ver.safari || (uu.ver.opera && !uu.ver.jit);

// uu.Class.ElementFromPoint
uu.Class("ElementFromPoint", {
    init:         init,       // init(callback:Function)
    handleEvent:  handleEvent // handleEvent(evt:EventObjectEx)
});

// uu.Class.ElementFromPoint.init
function init(callback) { // @param Function: callback
    this._callback = callback;

    uu.event(doc, "mousemove+", this); // document.addEventListener("mousemove", true) 相当
}

// uu.Class.ElementFromPoint.handleEvent
function handleEvent(evt) { // @param EventObjectEx:
    var node, px, py;

    // クロスブラウザなあーだこーだ
    if (uu.ie) {                     // IE
        px = evt.clientX;
        py = evt.clientY;
    } else if (_clientCoordinates) { // Safari, Opera9.x - Opera10.10
        px = evt.clientX + win.pageXOffset;
        py = evt.clientY + win.pageYOffset;
    } else {                         // IE, Firefox, Google Chrome
        px = evt.pageX - win.pageXOffset;
        py = evt.pageY - win.pageYOffset;
    }
    node = doc.elementFromPoint(px, py);

    // Opera9.x has text-node
    if (node.nodeType === 3) {
        node = node.parentNode;
    }
    if (node) {
        this._callback(evt, node);
    }
}

})(window, document, uu);

<script>
function xboot(uu) {
    // このへんはオマケ
    var tgts = uu.klass("tgt"), grips = uu.klass("grip");
    uu.factory("Drag", tgts[0], grips[0], { wheel: 1, minw: 100, minh: 100, maxw: 200 });
    uu.factory("Drag", tgts[1], grips[1], { wheel: 1 });
    uu.factory("Draggable", uu.klass("draggable"), uu.klass("droppable"));

    // このへんが本題
    uu.factory("ElementFromPoint", function(evt, node) {
        var info = uu.format("? (?,?) - ? - ?",
                             node.tagName, evt.px, evt.py,
                             uu.xpath(node), uu.json(node));

        window.status = info;
        if (!uu.ver.ie6) {
            uu.id("trace").innerText = info;
        }
    });
}
</script>

より詳しくは

@edvakf さんのすてきなエントリをどうぞ。
http://d.hatena.ne.jp/edvakf/20100205/1265338487

ちょっとしたこと

セレクタボックスをドロップダウンした状態で取れてくるノードが、Windows Safari と Mac Safari では異なったりしますし、ブラウザごとに細かい差異が色々と見つかります。
DOM Lv 0 な API が仕様化されないのは「好き勝手に実装されてて(違いが大きすぎて)標準化できない」ということなのかも。

CSSOM View Module で検討中なのを、すっかり忘れてました。http://www.w3.org/TR/cssom-view/#the-documentview-interface