的Javascript代表與子元素節點

在一個簡單的example，我儘量讓委託元素的第一級子。問題出現在孩子元素有孩子的時候。鼠標事件考慮點擊元素（不管級別）。的Javascript代表與子元素節點

我的解決辦法是循環直到達到第一級子;但我想知道這是否是最好的方法。

是否有一種方法可以在代理點擊時直接返回第一級子代？

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>

來源

2012-08-23 Googlebot

你有2個具有相同ID的div。這是一個錯誤 – user1071979

你想做什麼？ – jbabey

如果它只是fi你後第一個層次的元素，你可以檢查單擊元素的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-23 17:30:43 KooiInc

我不知道發生了什麼beeing問這裏。活動做泡泡默認情況下（這實際上是不正確的，在默認情況下，他們將穿越頂>下），因爲它最常見的調用.addEventListener與false作爲第三個參數。

可以進一步向上冒泡，由要停止它的節點上調用eventObject.stopPropagation()停止大多數事件。

如果你想「預過濾器」只有第一級子，你不應該使用代表團在所有，但.querySelectorAll像

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

查詢這將綁定點擊所有直接子事件監聽器#test。

看到，在行動：只使用http://jsfiddle.net/8Xmn4/

來源

2012-08-23 17:26:31 jAndy

jQuery(':first-child') use this jquery to get the first child

來源

2012-08-23 17:27:10 user1071979

的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-23 17:28:43

獲得一個參照節點的所有第一級子很簡單：

這個輸出，在Firebug的格式：

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

顯然，這與他們各自的孩子返回的孩子，但第一級參考依然存在。

來源

2012-08-23 17:54:15 MalSu

的Javascript代表與子元素節點

回答

相關問題