javascript - 确定事件冒泡的要素

给定这样的简化文档:

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

如果我要单击#theInput，则click事件将冒泡到#innerDiv，然后是#outerDiv。我想要做的是将一个处理程序放在#outerDiv上以侦听那些单击，然后检查“气泡链”以查看哪些元素先前已收到此相同的click事件。

因此，例如，在#theInput上单击#outerDiv中的处理程序，将得到[#outerDiv, #innerDiv, #theInput]。如果我在#theInput之外单击，但仍在#innerDiv内，则结果将是[#outerDiv, #innerDiv]
需要澄清的是，实际文件并非如此简单，每个级别可以有任意数量的 child 或 sibling 。另外，当我指的是#theInput时，我指的是元素本身，也就是说，我不是在寻找ID数组。最后，鉴于可以有任意数量的元素，我想避免向中间元素添加额外的处理程序。

jQuery欢迎来到我家。

最佳答案

似乎:

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

  // ...
}

是您所需要的，尤其是如果您使用的是jQuery，并且事件处理程序将this绑定(bind)到与处理程序代码相关的元素。来自目标的父级列表将告诉您事件可能会冒出的所有元素，并且this引用将是该列表中的元素之一。 (我认为 parent 的列表按“从内到外”的顺序排列，但是我必须检查一下。)因此，您可以知道哪些元素已经“被访问”了，哪些没有。