我有树结构：
<style>
.Container {
padding: 0;
margin: 0;
}
.Container li {
list-style-type: none;
}
/* indent for all tree children excepts root */
.Node {
margin-left: 18px;
zoom: 1;
}
.IsRoot {
margin-left: 0;
}
.ExpandOpen .Expand {
background-image: url(/tree_accordion/treeacc/pictures/minus.gif);
}
/* closed is higher priority than open */
.ExpandClosed .Expand {
background-image: url(/tree_accordion/treeacc/pictures/plus.gif);
}
/* highest priority */
.ExpandLeaf .Expand {
/* background-image: url(/tree_accordion/treeacc/pictures/leaf.gif); */
background-image: none;
}
.Content {
min-height: 18px;
margin-left:18px;
}
* html .Content {
height: 18px;
}
.ExpandLoading {
width: 18px;
height: 18px;
float: left;
background-image: url(/tree_accordion/treeacc/pictures/loading.gif);
}
.Expand {
width: 18px;
height: 18px;
float: left;
}
.ExpandOpen .Container {
display: block;
}
.ExpandClosed .Container {
display: none;
}
.ExpandOpen .Expand, .ExpandClosed .Expand {
cursor: pointer;
}
.ExpandLeaf .Expand {
cursor: auto;
}
.Node input {
width: 14px;
height: 14px;
float: left;
margin: 2px;
}
</style>
JS
<script type="text/javascript">
function tree_toggle(event) {
event = event || window.event
var clickedElem = event.target || event.srcElement
if (!hasClass(clickedElem, 'Expand')) {
return;
}
// Node, onClick
var node = clickedElem.parentNode
if (hasClass(node, 'ExpandLeaf')) {
return;
}
// new class for node
var newClass = hasClass(node, 'ExpandOpen') ? 'ExpandClosed' : 'ExpandOpen'
var re = /(^|\s)(ExpandOpen|ExpandClosed)(\s|$)/
node.className = node.className.replace(re, '$1'+newClass+'$3')
}
function hasClass(elem, className) {
return new RegExp("(^|\\s)"+className+"(\\s|$)").test(elem.className)
}
</script>
HTML
<div onclick="tree_toggle(arguments[0])">
<ul class="Container"><li class="Node ExpandClosed">
<div class="Expand"> </div>
<div class="Content">XXX</div>
<ul class="Container"><li class="Node ExpandClosed">
<div class="Expand"> </div>
<div class="Content">aaa</div>
<ul class="Container"><li class="Node ExpandLeaf IsLast">
<div class="Expand"> </div>
<div class="Content"><label><input type="checkbox" id="1.1.1">a1</label></div>
</li></ul>
<ul class="Container"><li class="Node ExpandLeaf IsLast">
<div class="Expand"> </div>
<div class="Content"><label><input type="checkbox" id="1.1.2">a2</label></div>
</li></ul>
<ul class="Container"><li class="Node ExpandLeaf IsLast">
<div class="Expand"> </div>
<div class="Content"><label><input type="checkbox" id="1.1.3">a3</label></div>
</li></ul>
</li></ul>
<ul class="Container"><li class="Node ExpandClosed">
<div class="Expand"> </div>
<div class="Content">bbb</div>
<ul class="Container"><li class="Node ExpandLeaf IsLast">
<div class="Expand"> </div>
<div class="Content"><label><input type="checkbox" id="1.2.1">b1</label></div>
</li></ul>
<ul class="Container"><li class="Node ExpandLeaf IsLast">
<div class="Expand"> </div>
<div class="Content"><label><input type="checkbox" id="1.2.2">b2</label></div>
</li></ul>
</li></ul>
<ul class="Container"><li class="Node ExpandClosed">
<div class="Expand"> </div>
<div class="Content">ccc</div>
<ul class="Container"><li class="Node ExpandLeaf IsLast">
<div class="Expand"> </div>
<div class="Content"><label><input type="checkbox" id="1.3.1">c1</label></div>
</li></ul>
</li></ul>
</li></ul>
<ul class="Container"><li class="Node ExpandClosed">
<div class="Expand"> </div>
<div class="Content">YYY</div>
<ul class="Container"><li class="Node ExpandClosed">
<div class="Expand"> </div>
<div class="Content">ddd</div>
<ul class="Container"><li class="Node ExpandLeaf IsLast">
<div class="Expand"> </div>
<div class="Content"><label><input type="checkbox" id="2.1.1">d1</label></div>
</li></ul>
<ul class="Container"><li class="Node ExpandLeaf IsLast">
<div class="Expand"> </div>
<div class="Content"><label><input type="checkbox" id="2.1.2">d2</label></div>
</li></ul>
</li></ul>
</li></ul>
</div>
我想获取点击列表元素的ID。没有onClick到每个元素和JQuery。 所以，我知道结构简单：
<ul id="sss">
<li id="1.1.1"></li>
<li id="1.1.2"></li>
</ul>
使用：
var ul = document.getElementById('sss');
ul.addEventListener('click', function(e) {
if (e.target.tagName === 'LI'){
alert(e.target.id);
}
}）;
我希望点击复选框（或标签）点击我的ID。例如：1.1.1或1.1.2 ...... 在构建树时，我可以修改我的块：
<ul class="Container"><li class="Node ExpandLeaf IsLast">
<div class="Expand"> </div>
<div class="Content"><label><input type="checkbox" id="1.1.1">a1</label></div>
</li></ul>
到
<ul class="Container"><li class="Node ExpandLeaf IsLast" id="1.1.1">
<div class="Expand"> </div>
<div class="Content"><label><input type="checkbox">a1</label></div>
</li></ul>
但无法正确创建功能。求助。
答案 0 :(得分：2)
在事件委托的情况下，找到正确的节点很重要，因为事件会使DOM树冒泡。通常while循环用于此。从e.target元素开始，然后检查它是否符合您的条件（CSS选择器，标记名称等）。你重复它，直到你发现事件发生在感兴趣的容器（成功 - 句柄事件），或直到你到达主机元素（用于注册事件;在这种情况下什么都不做）。然后搜索结束。
在你的情况下，它将是这样的：
var ul = document.getElementById('sss');
ul.addEventListener('click', function (e) {
var target = e.target;
while (target !== ul) {
if (target.tagName === 'LI') {
alert(target.id);
return;
}
target = target.parentNode;
}
});
查看下面的演示。
var ul = document.getElementById('sss');
ul.addEventListener('click', function (e) {
var target = e.target;
// Label generates one more click event on the related input element, suppress one
if (target.tagName === 'LABEL') {
return;
}
while (target !== ul) {
if (target.tagName === 'LI') {
alert(target.id);
return;
}
target = target.parentNode
}
});<ul class="Container" id="sss">
<li class="Node ExpandLeaf IsLast" id="1.1.1">
<div class="Expand">expand</div>
<div class="Content">
<label><input type="checkbox" />a1</label>
</div>
</li>
<li class="Node ExpandLeaf IsLast" id="1.1.2">
<div class="Expand">expand</div>
<div class="Content">
<label><input type="checkbox" />a2</label>
</div>
</li>
</ul>