Home/ Questions/Q 1074913
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T21:12:04+00:00

On user click I would like to get a list of all elements that

  • 0

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 ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0