public
gwwar / KoreSampl.js
Last active

A simple helper that returns a list of elements at a given point using elementFromPoint

  • Download Gist
KoreSampl.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 
/**
* @author Kerry Liu
* WTFPL
**/
;(function(){
    //test for ie: turn on conditional comments
    var jscript/*@cc_on=@_jscript_version@*/;
    var styleProp = (jscript) ? "display" : "pointerEvents";
 
    var KoreSampl = function() {};
    KoreSampl.prototype.fromEvent = function(e, lastElement) {
        e = e || window.event; //IE for window.event
        return this.atPoint(e.clientX, e.clientY, lastElement);
    };
    KoreSampl.prototype.atPoint = function(clientX, clientY, lastElement) {
        //support for child iframes
        var d = (lastElement) ? lastElement.ownerDocument : document;
        //the last element in the list
        lastElement = lastElement || d.getElementsByTagName("html")[0];
 
        var element = d.elementFromPoint(clientX, clientY);
        if(element === lastElement || element.nodeName === "HTML") {
            return [element];
        } else {
            var style= element.style[styleProp];
            element.style[styleProp]="none"; //let us peak at the next layer
            var result = [element].concat(this.atPoint(clientX,clientY,lastElement));
            element.style[styleProp]= style; //restore
            return result;
        }
    };
    window["KoreSampl"] = new KoreSampl();
})();
gwwar commented

Sample usage:

Up to a given container element:

$(domEle).click(function(event) {
      //prints out everything up to domEle     
      console.log(KoreSampl.fromEvent(event, domEle));      
});

Everything up to root html node

$(window).click(function(event) {
      //prints out everything up to domEle     
      console.log(KoreSampl.fromEvent(event));      
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.