从树上得到身份证

Question

我有树结构：

​

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

​

但不能创建正确的功能。救命求你了。

Answer 1

对于事件委托，重要的是找到一个正确的节点，因为事件会在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>

​