Как получить список всех элементов, находящихся в щелчке?

На клике пользователя я хотел бы получить список всех элементов, которые находятся в в нажатой точке.

Например, если пользователь нажимает на Hello здесь:

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

Я хотел бы получить следующий список:

  • <span> элемент
  • <div> элемент
  • <body> элемент
  • <html> элемент

Каким будет самый простой способ получить эти элементы?

Ответы

Ответ 1

РЕДАКТИРОВАТЬ: Основываясь на разъяснении, я думаю, что это то, что вы имеете в виду:

EDIT: Как указано @Misha, вместо width() и height() следует использовать outerWidth() и outerHeight(), чтобы получить точный range.

Кроме того, если нечего препятствовать пузырьку событий на странице, то click следует поместить на document, поскольку он будет намного более эффективным. Даже если какой-либо другой обработчик click предотвращает пузырьки, вы все равно должны иметь click на document и просто обрабатывать его отдельно от тех обработчиков, которые предотвращают пузырьки.

Пример: 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;
});​

Оригинальный ответ:

Это даст вам массив имен тегов, включая span. Не могу сказать, действительно ли это то, что вы хотели.

Он использует .parents() вместе с .andSelf(), чтобы получить элементы, затем использует .map() с .get() для создания массива.

Пример: http://jsfiddle.net/9cFTG/

var list;

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

Если вам просто нужны элементы, а не теги, избавиться от .map() и .get().

Или если вы хотите присоединиться к массиву в строку, используя какой-то разделитель, просто добавьте .join(" ") после .get(), поместив ваш разделитель внутри кавычек.

Ответ 2

В ближайшее время это должно стать возможным:

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

Обновление 2019
В настоящее время в редакции проекта:
Элементы из точки

Ответ 3

Функция jQuery parents() может сделать это для вас.

Чтобы прикрепить событие click ко всем тегам span, например:

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

Ответ 4

используйте родительский метод, чтобы получить родительский элемент текущего тега рекурсивно или в цикле: 

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

Ответ 5

Попробуйте что-то вроде этого

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

проверить живое демо

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

Ответ 6

Просто реализация javascript:

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

Работала для меня в firefox и chrome по 3-29-2017

Ответ 8

Я обновил демо http://jsfiddle.net/57bVR/3/, добавив в код логику для управления также (если присутствует):

  • Прокрутка страницы
  • Тег html уровня увеличения (в проекте, который я выполняю, он дает мне несколько проблем)


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