Question

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

<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。

Answer 1

似乎：

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

  // ...
}

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

Answer 2

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

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

Answer 3

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

确定事件已通过的元素

3 个答案: