Определите элементы, через которые прошло событие

Question

Учитывая упрощенный документ, подобный этому:

<div id="outerDiv">
    <div id="innerDiv">
        <input id="theInput" />
    </div>
</div>

Если бы я нажал на #theInput, событие щелчка всплыло бы до #innerDiv, а затем #outerDiv. Что я хотел бы сделать, так это установить обработчик на #outerDiv для прослушивания этих кликов, а затем осмотреть «цепочку пузырей», чтобы увидеть, какие элементы ранее получали такое же событие нажатия.

Так, например, нажатие на #theInput обработчик в #outerDiv даст мне [#outerDiv, #innerDiv, #theInput]. Если бы я щелкнул за пределами #theInput, но все еще внутри #innerDiv, результат был бы [#outerDiv, #innerDiv]

Просто чтобы уточнить, настоящий документ не так прост, как этот, и на каждом уровне может быть любое количество детей или братьев и сестер. Также, когда я ссылаюсь на #theInput, я имею в виду сам элемент, то есть я не ищу массив идентификаторов. Наконец, учитывая, что может быть любое количество элементов, я бы хотел избежать добавления дополнительных обработчиков к промежуточным элементам.

jQuery можно только приветствовать в моем доме.

Answer 1

Похоже:

function myHandler(ev) {
  var $bubbleParents = $(ev.target).parents();

  // ...
}

- это все, что вам нужно, особенноесли вы используете jQuery и ваши обработчики событий будут иметь this, привязанную к элементу, относящемуся к коду обработчика.Список родителей из цели расскажет вам обо всех элементах, к которым событие может всплыть, и ваша ссылка this станет одним из элементов в этом списке.(Я думаю, что список родителей находится в порядке "от внутреннего к внешнему", но я должен был бы проверить скрипку.) Таким образом, вы можете сказать, какие элементы уже были "посещены", а какиенет.

Answer 2

С объектом события используйте цель, чтобы узнать элемент click. Оттуда вы можете использовать функцию parent () в jQuery, чтобы найти всех родителей в цепочке.

var parents;
handler = function(e){
 // specifying the limit node in parents
 parents = $(e.target).parents("#outerDiv");
};

Answer 3

$('outerDiv').bind('click', function(e) {
    var current = e.target;
    var arrayClicked = new Array();
    arrayClicked[] = current;
    function test() {
        if(current.parent() == $('.outerDiv')) {
            return arrayClicked;
        } else {
            arrayClicked[] = current;
            current = current.parent();
            test();
        }
    }
    var yourdivs = test();
});