多級LI級聯ONCLICK事件

我正在尋找一種方法來在每個節點中創建一個具有onclick事件的多級樹。多級LI級聯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 - >警報LEVEL4，LEVEL3，LEVEL2和LEVEL1上LEVEL3
點擊 - - >爲LEVEL3，LEVEL2和LEVEL1
等警報...

我期待有警報只爲我點擊，而不是繼承上級其餘同級...

有沒有簡單的方法來實現它？

謝謝！

來源

2017-02-10 byle.05

使用事件委派與不顯眼的代碼，而不是內聯。

將eventlistener附加到您的父元素，並使用event對象的target來標識觸發事件的元素。

例如：

// 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) { 
 
\t console.log("You clicked " + e.target.id); 
 
}

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

來源

2017-02-10 13:47:18 Abhitalks

ABHI您好，感謝！那是我一直在尋找的。現在的問題是，我正在使用jquery庫（fancytree）來將ul/li結構轉換爲一個漂亮的樹視圖...在某些時候，庫將所有UL的display屬性設置爲NONE，然後我認爲是我失去了事件處理的地方......當display屬性設置爲none時，沒有顯示任何內容......將父元素設置爲diplay：none併爲其分配事件之間有任何關係嗎？ –

@ byle.05這應該不成問題。你可以用一個最小可重現的例子來問一個新問題。這將有所幫助。 – Abhitalks

感謝Abhi，我終於能夠把它整理出來。問題在於花式樹庫取代了我自己的UL/LI結構，而且我的ID已經丟失。我稍微修改了庫來繼承這些ID，現在完美地工作:) –

多級LI級聯ONCLICK事件

回答

相關問題