给出这样一个简化的文件:
<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。
答案 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();
});