Skip to content

Instantly share code, notes, and snippets.

@gwwar
Created March 23, 2012 03:05
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save gwwar/2166393 to your computer and use it in GitHub Desktop.
Save gwwar/2166393 to your computer and use it in GitHub Desktop.
A simple helper that returns a list of elements at a given point using elementFromPoint
/**
* @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
Copy link
Author

gwwar commented Mar 23, 2012

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

@gwwar
Copy link
Author

gwwar commented May 6, 2019

Modern Sample usage:

To use, copy/paste the script into the dev console.

Then add an event listener.

Everything up to root html node:

 document.addEventListener("click", function(event) { console.log(KoreSampl.fromEvent(event)) } )

Or from a specific CSS selector:

document.querySelector( 'myElementSelector' ).addEventListener("click", function(event) { console.log(KoreSampl.fromEvent(event)) } )

KoreSampl

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment