Question

我正在寻找一种在每个节点中使用onclick事件创建多级树的方法。

我有以下代码：

<div id="tree">
   <ul id="UL1" onclick="alert('LEVEL1');">
      <li id="LI1">
         LEVEL1
         <ul id="UL2" onclick="alert('LEVEL2');">
            <li id="LI2">
               LEVEL2
               <ul id="UL3" onclick="alert('LEVEL3');">            
                  <li id="LI3">
                     LEVEL3
                     <ul id="UL3" onclick="alert('LEVEL4');">
                        <li id="LI4" >LEVEL4                        
                     </ul>                  
               </ul>
         </ul>      
   </ul>
</div>

目的是如果用户点击LEVEL4（例如），他只会获得LEVEL4的警报。问题是警报是级联的，当点击某个特定级别时，我会收到所有继承警报：

点击LEVEL4 - ＆gt; LEVEL4，LEVEL3，LEVEL2和LEVEL1的警报
点击LEVEL3 - ＆gt; LEVEL3，LEVEL2和LEVEL1的警报
等...

我希望仅针对我点击的相应级别发出警报，而不是继承其余的上级......

有没有简单的方法来实现它？

谢谢！

Answer 1

使用不显眼的代码而不是内联的事件委派。

将eventlistener附加到您的父元素，并使用event对象的target来识别触发该事件的元素。

例如：

＆＃13;

// Your parent element
var div = document.getElementById("tree");

// Attach the eventlistener to the parent element
div.addEventListener('click', dosomething);

// Use the target from the event object that is passed to the handler
function dosomething(e) {
	console.log("You clicked " + e.target.id); 
}

＆＃13;

<div id="tree">
   <ul id="UL1" >
      <li id="LI1">
         LEVEL1
         <ul id="UL2" >
            <li id="LI2">
               LEVEL2
               <ul id="UL3" >            
                  <li id="LI3">
                     LEVEL3
                     <ul id="UL3" >
                        <li id="LI4" >LEVEL4                        
                     </ul>                  
               </ul>
         </ul>      
   </ul>
</div>

＆＃13;

多级LI级联ONCLICK事件

1 个答案: