jquery 确定事件已冒泡的元素

8ulbf1ek 于 5个月前发布在 jQuery

关注(0)|答案(4)|浏览(69)

给出一个像这样的简化文档：

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

字符串
如果我点击#theInput，点击事件将冒泡到#innerDiv，然后是#outerDiv。我想做的是在#outerDiv上放置一个处理程序来监听这些点击，然后检查'bubble-chain'以查看哪些元素以前收到过相同的点击事件。
例如，单击#outerDiv中的处理程序#theInput将给予[#outerDiv, #innerDiv, #theInput]。如果单击#theInput外部但仍在#innerDiv内部，则结果将是[#outerDiv, #innerDiv]

需要说明的是，实际的文档并不像这样简单，在每个级别上可能有任意数量的子元素或兄弟元素。另外，当我引用#theInput时，我指的是元素本身，也就是说，我不是在寻找ID数组。最后，考虑到可能有任意数量的元素，我希望避免为中间元素添加额外的处理程序。*

jQuery在我家很受欢迎。

jquery

来源：https://stackoverflow.com/questions/5420399/determine-the-elements-which-an-event-has-bubbled-through

4条答案

按热度按时间

blmhpbnm1#

似乎是：

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

  // ...
}

字符串
这就是你所需要的，特别是如果你使用jQuery，你的事件处理程序将把this绑定到与处理程序代码相关的元素。来自目标的父元素列表将告诉你所有事件可能冒泡的元素，你的this引用将是该列表中的一个元素。（我 * 认为 * 父元素列表是按照“从内到外”的顺序排列的，但我必须检查一下）。因此，您可以分辨出哪些元素已经被“访问”，哪些还没有。

赞(0）回复(0）举报 5个月前

mu0hgdu02#

使用event对象，使用target找出click元素。从那里您可以使用jQuery中的parents（）函数来查找链中的所有父元素。

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

字符串

赞(0）回复(0）举报 5个月前

7ajki6be3#

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

字符串

赞(0）回复(0）举报 5个月前

fkvaft9z4#

使用vanilla JS

event.composedPath()

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

字符串

赞(0）回复(0）举报 5个月前

我来回答

jquery 确定事件已冒泡的元素

4条答案

相关问题

热门标签

最新问答