确定事件已通过的元素

时间:2011-03-24 14:05:57

标签: javascript jquery events dom

给出这样一个简化的文件:

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

如果我点击#theInput,则点击事件会冒出#innerDiv然后#outerDiv。我想做的是在#outerDiv上设置一个处理程序来监听这些点击,然后检查“bubble-chain”以查看之前收到过同一点击事件的元素。

因此,例如,点击#theInput #outerDiv中的处理程序会给我[#outerDiv, #innerDiv, #theInput]。如果我在#theInput之外点击,但仍在#innerDiv内,则结果为[#outerDiv, #innerDiv]

只是为了澄清,实际文件并不像这样简单,每个级别可能有任意数量的孩子或兄弟姐妹。另外,当我提到#theInput时,我指的是元素本身,也就是说,我不是在寻找一系列ID。最后,鉴于可能有任意数量的元素,我想避免为中间元素添加额外的处理程序。

我家欢迎jQuery。

3 个答案:

答案 0 :(得分:8)

似乎:

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

  // ...
}

就是你所需要的,尤其是如果你正在使用jQuery,你的事件处理程序将this绑定到与处理程序代码相关的元素。来自目标的父母列表将告诉您事件可能冒泡的所有元素,并且您的this引用将是该列表中的元素之一。 (我认为父母的名单是“从内到外”的顺序,但我必须检查一个小提琴。)这样你就可以知道哪些元素已经被“访问过”了没有。

答案 1 :(得分:1)

使用事件对象,使用目标找出click元素。从那里你可以使用jQuery中的parents()函数来查找链中的所有父项。

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

答案 2 :(得分:0)

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