javascript - Determine the elements which an event has bubbled through - Stack Overflow

admin管理员组

文章数量:1292702

Given a simplified document like this:

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

If I were to click on #theInput, the click event would bubble up to #innerDiv and then #outerDiv. What I'd like to do would be to put a handler on #outerDiv to listen for those clicks, and then inspect the 'bubble-chain' to see which elements have previously received this same click event.

So, for example, clicking on #theInput the handler in #outerDiv would give me [#outerDiv, #innerDiv, #theInput]. If I were to click outside of #theInput, but still inside #innerDiv then the result would be [#outerDiv, #innerDiv]

Just to clarify, the actual document is not as simple as this, and there could be any number of children or siblings at each level. Also, when I refer to #theInput, I'm referring to the element itself, that is, I'm not looking for an array of IDs. Lastly, given that there could be any number of elements, I'd like to avoid adding extra handlers to intermediate elements.

jQuery is wele in my house.

Given a simplified document like this:

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

If I were to click on #theInput, the click event would bubble up to #innerDiv and then #outerDiv. What I'd like to do would be to put a handler on #outerDiv to listen for those clicks, and then inspect the 'bubble-chain' to see which elements have previously received this same click event.

So, for example, clicking on #theInput the handler in #outerDiv would give me [#outerDiv, #innerDiv, #theInput]. If I were to click outside of #theInput, but still inside #innerDiv then the result would be [#outerDiv, #innerDiv]

Just to clarify, the actual document is not as simple as this, and there could be any number of children or siblings at each level. Also, when I refer to #theInput, I'm referring to the element itself, that is, I'm not looking for an array of IDs. Lastly, given that there could be any number of elements, I'd like to avoid adding extra handlers to intermediate elements.

jQuery is wele in my house.

• javascript
• jquery
• events
• dom

Share Improve this question Follow asked Mar 24, 2011 at 14:05 nickfnickf 546k198198 gold badges658658 silver badges727727 bronze badges 1

• 1 Can't you just get the ".parents()" list from the event target? – Pointy Commented Mar 24, 2011 at 14:09

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 7

Seems like:

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

  // ...
}

is all you need, esp. if you're using jQuery and your event handlers will have this bound to the element relevant to the handler code. The list of parents from the target will tell you all the elements that the event can possibly bubble to, and your this reference will be one of the elements in that list. (I think the list of parents is in "inner-to-outer" order, but I'd have to check in a fiddle.) Thus you can tell which elements have already been "visited" and which haven't.

With the event object, use the target to find out the click element. From there you can use the parents() function in jQuery to find all the parents in the chain.

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

using vanilla JS

event.posedPath()

// based on question
let inner = document.getElementById("theInput");
inner.addEventListener("click", (e) => {
  console.log(e.posedPath());
})

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

本文标签： javascriptDetermine the elements which an event has bubbled throughStack Overflow