單擊孩子ul后，禁止在父li上注冊點擊

Question

var treeview = document.querySelectorAll(".treeview");
var submenu = document.querySelectorAll(".treeview ul");
for (var i=0; i<treeview.length; i++;) {
    treeview[i].addEventListener("click", function(e) {
    this.classList.toggle("menu-open");
    e.stoppropagation();
});

當單擊li時，打開子菜單（treeview-menu），但是如果單擊了子ul鏈接，則由於單擊被注冊，因此它將關閉菜單。

<li class="treeview">
          <a href="#">
            <i class="fa fa-dashboard"></i> <span>Dashboard</span>
          </a>
          <ul class="treeview-menu">
            <li><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
            <li class="active"><a href="index2.html"><i class="fa fa-circle-o"></i> Dashboard v2</a></li>
          </ul>
   </li>

我的失敗嘗試如下：

var treeview = document.querySelectorAll(".treeview");
var submenu = document.querySelectorAll(".treeview ul");
for (var i=0; i<treeview.length; i++) {
    treeview[i].addEventListener("click", function(e) {
    this.classList.toggle("menu-open");
    e.stoppropagation();
    submenu[i].addEventListener("click", function() {
        e.stoppropagation();
    })
});

Answer 1

為我工作

    var treeview = document.querySelectorAll(".treeview");
    var submenu = document.querySelectorAll(".treeview ul");
    for (var i=0; i<treeview.length; i++) {
        treeview[i].addEventListener("click", function() {
        this.classList.toggle("menu-open");
    for (var x=0; x<treeview.length; x++){  
        submenu[x].addEventListener("click", function(e) {
            e.stopPropagation();
        })
      }
     });
    }

Answer 2

您的代碼中存在幾個問題：

• stopPropagation的拼寫錯誤
• 括號未閉合，主要是因為縮進已關閉
• 內部事件處理程序引用一個i ，該i已經超過了treeview列表的長度。 請注意，在完成任何單擊之前，循環已完成。 因此，在點擊處理程序中， i與循環的某個迭代無關。 您可以通過給i塊范圍來解決此問題（使用let ）
• 內部事件處理程序引用了一個屬於另一個事件的e對象，因為您沒有將其定義為參數
• 您假定每個.treeview都有一個ul子對象，否則相關子菜單的索引將不對應。

除了最后一點，以下內容在您的特定示例中有效：

for (let i=0; i<treeview.length; i++) { // block scope
    treeview[i].addEventListener("click", function(e) {
        this.classList.toggle("menu-open");
        e.stopPropagation(); // Spelling!
        submenu[i].addEventListener("click", function(e) { // <-- pass e
            e.stopPropagation(); // Spelling!
        });
    });
} // Fix brace

但是，由於.treeview元素理論上可​​能具有0個或多個1個子ul ，因此上述解決方案不夠通用。 我什至建議只捕獲.treeview > a元素上的點擊，然后您甚至不會遇到這種傳播問題：

 for (const link of document.querySelectorAll(".treeview > a")) { link.addEventListener("click", function(e) { this.parentNode.classList.toggle("menu-open"); }); } 

 .menu-open > ul.treeview-menu { display: block } .treeview > ul { display: none } 

 <li class="treeview"> <a href="#"> <i class="fa fa-dashboard"></i> <span>Dashboard</span> </a> <ul class="treeview-menu"> <li><a href="#"><i class="fa fa-circle-o"></i> Dashboard v1</a></li> <li class="active"><a href="#"><i class="fa fa-circle-o"></i> Dashboard v2</a></li> </ul> </li>