javascript - 确定事件冒泡通过的元素

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 时，我指的是元素本身，也就是说，我不是在寻找 ID 数组。最后，鉴于可能有任意数量的元素，我想避免向中间元素添加额外的处理程序。

我家欢迎 jQuery。

Answer 1

看起来像:

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

  // ...
}

就是你所需要的，特别是。如果您使用的是 jQuery，并且您的事件处理程序会将 this 绑定(bind)到与处理程序代码相关的元素。目标的父项列表将告诉您事件可能冒泡到的所有元素，并且您的 this 引用将是该列表中的元素之一。 (我认为 parent 的名单是“从内到外”的顺序，但我必须检查一个 fiddle 。)因此你可以知道哪些元素已经被“访问过”并且还没有。