How to get a list of all elements that resides at the clicked point?

On user click I would like to get a list of all elements that resides at the clicked point.

For example, if user clicks on Hello here:

<div><span>Hello<span></div>

I would like to get the following list:

<span> element
<div> element
<body> element
<html> element

What would be the easiest method to get these elements ?

EDIT: Based on clarification, I think this is what you mean:

EDIT: As pointed out by @Misha, outerWidth() and outerHeight() should be used in lieu of width() and height() in order to get an accurate range.

Also, if there's nothing to prevent event bubbling on the page, then the click should be placed on the document as it will be much more efficient. Even if some other click handler prevents bubbling, you should still have the click on the document, and just handle it separately from those handler that prevent bubbling.

Example: http://jsfiddle.net/57bVR/3/

$(document).click(function(e) {
    var clickX = e.pageX
        ,clickY = e.pageY
        ,list
        ,$list
        ,offset
        ,range
        ,$body = $('body').parents().andSelf();

    $list = $('body *').filter(function() {
        offset = $(this).offset();
        range = {
            x: [ offset.left,
                offset.left + $(this).outerWidth() ],
            y: [ offset.top,
                offset.top + $(this).outerHeight() ]
        };
        return (clickX >= range.x[0] && clickX <= range.x[1]) && (clickY >= range.y[0] && clickY <= range.y[1])
    });

    $list = $list.add($body);

    list = $list.map(function() {
        return this.nodeName + ' ' + this.className
    }).get();
    alert(list);
    return false;
});

Original answer:

This will give you an Array of the tag names including the span. Couldn't quite tell if this is what you wanted.

It uses .parents() along with .andSelf() to get the elements, then uses .map() with .get() to create the Array.

Example: http://jsfiddle.net/9cFTG/

var list;

$('span').click(function() {
    list = $(this).parents().andSelf().map(function() {
        return this.nodeName;
    }).get();
    alert(list);
});

If you just wanted the elements, not the tag names, get rid of .map() and .get().

Or if you wanted to join the Array into a String using some sort of separator, just add .join(" ") after .get(), placing your separator inside the quotes.

In the near future this should be possible:

$(document).click(function(e) {
    var family = this.elementsFromPoint(e.pageX, e.pageY);
    $(family).each( function () {
            console.log(child);
    });
});

Update 2019
Currently in editors draft:
Elements from point

zaynyatyi

use parent method to get parent of the current tag recursively or in cycle:

var parentTag = $(this).parent().get(0).tagName;

The jQuery parents() function can do this for you.

To attach a click event to all span tags, for example:

$("span").click(function() {
    var parents = "";
    $(this).parents().map(function () {
        parents = parents + " " + this.tagName;
    })
    alert(parents);
});

Try something like this

$('span').click(function() {
 var parents = $(this).parents();
 for(var i = 0; i < parents.length; i++){
  console.log($(parents[i]).get(0).tagName)
 }
});

check the live demo

http://jsfiddle.net/sdA44/1/

Just javascript implementation:

window.addEventListener('click', function(e){
    console.log(document.elementFromPoint(e.pageX, e.pageY))
}, false)

Worked for me in firefox and chrome as of 3-29-2017

Found this: https://gist.github.com/osartun/4154204

Had to change elements.get(i) to elements[i] to fix it...

I have updated the demo http://jsfiddle.net/57bVR/3/, adding to the code the logic to manage also (if present):

The scrolling of the page
The zoom level html tag (in the project I work it gives to me several troubles)


$(document).click(function (e) {
    var htmlZoom = window.getComputedStyle(document.getElementsByTagName('html')[0]).getPropertyValue('zoom');
    var clickX = e.pageX,
    clickY = e.pageY,
    list,
    $list,
    offset,
    range,
    $body = $('body').parents().andSelf();
    $list = $('body *').filter(function () {
            offset = $(this).offset();
            marginLeft = offset.left * htmlZoom - $(document).scrollLeft();
            marginTop = offset.top * htmlZoom - $(document).scrollTop();
            outerWidth = $(this).outerWidth() * htmlZoom;
            outerHeight = $(this).outerHeight() * htmlZoom;
            range = {
                x : [marginLeft,
                    marginLeft + outerWidth],
                y : [marginTop,
                    marginTop + outerHeight]
            };

        return (clickX >= range.x[0] && clickX <= range.x[1]) && (clickY >= range.y[0] && clickY <= range.y[1])

    });

$list = $list.add($body);

list = $list.map(function () {
    return this.nodeName + ' ' + this.className
}).get();
alert(list);
return false;
});

来源：https://stackoverflow.com/questions/3735278/how-to-get-a-list-of-all-elements-that-resides-at-the-clicked-point

标签

javascript

jquery

html

click