1

在一个简单的示例中，我尝试为元素的一级子级设置委托。当子元素有子元素时，问题就来了。鼠标事件考虑单击的元素（无论级别如何）。

我的解决方案是循环直到到达第一级孩子；但我想知道这是否是最好的方法。

没有委托点击直接返回一级子级的方法吗？

JS

window.onload=function(){
document.getElementById('test').addEventListener('click', function(e){
console.log(e.target);alert(e.target.id);
   }, false);
}

HTML

<div id="test">
<a href="#" id="first">First</a>
<a href="#" id="second"><b>Second</b></a>
<a href="#" id="third">Third</a>
<a href="#" id="fourth">Fourth</a>
<div id="div">Division</div>
<div id="div2"><span>Division</span></div>
</div>
4

5 回答 5

3

如果它只是您之后的第一级元素，您可以检查单击元素的 parentNode 是否为根，无需进一步遍历。否则，您需要遍历根的第一个孩子。就像是：

// level0 is the root
level0.addEventListener('click', function(e) {
    var from = e.target || e.srcElement;
    from = from.parentNode === level0 ? from : findFirst(level0,from);
    /** do things **/
}, false);

// traverse up to first child of [root] 
function findFirst(root,el){
  while(true){
   el = el.parentNode;
   if (el && el.parentNode === root){
     return el;
   }
  }
  return null;  
}

这是你的jsfiddle的一个分支，使用上面的。

于 2012-08-23T17:30:43.500 回答
1

仅使用 javascript，您可以使用递归函数来查找具有 id 的第一个父元素：

function findParentWithId(element){
    if(element.id){
        return element;
    }

    return findParentWithId(element.parentNode);
}

然后，将它与事件的目标元素一起使用

document.getElementById('test').addEventListener('click', function(e){
    console.log(findParentWithId(e.target));alert(findParentWithId(e.target).id);
}, false);
于 2012-08-23T17:28:43.460 回答
1

我不确定这里在问什么。默认情况下，事件会冒泡（实际上并非如此，默认情况下它们会自上而下遍历），因为它最常作为第三个参数调用.addEventListener。false

eventObject.stopPropagation()您可以通过调用要停止它的节点来阻止大多数事件进一步冒泡。

如果您只想“预过滤”第一级子级，则根本不应该使用委托，而是使用.querySelectorAlllike查询

[].forEach.call( document.querySelectorAll('#test > *'), function( node ) {
    node.addEventListener('click', function( event ) {
        alert( this.id );
    }, false);
});

这会将 click 事件侦听器绑定到来自#test.

看看实际情况：http: //jsfiddle.net/8Xmn4/

于 2012-08-23T17:26:31.020 回答
1

获取对节点的所有第一级子节点的引用很简单：

window.onload=function(){
    document.getElementById('test').addEventListener('click', function(e){
        return document.getElementById('test').children;
    }, false);
}

这以 Firebug 格式输出：

[a#first #, a#second #, a#third #, a#fourth #, div#div, div#div]

显然，它返回了孩子和他们各自的孩子，但第一级参考仍然存在。

于 2012-08-23T17:54:15.913 回答
0 
jQuery(':first-child') use this jquery to get the first child
于 2012-08-23T17:27:10.193 回答