event.target選擇它的所有父母

Question

如果我點擊任何一個李，我得到它的所有父母或最近的選擇一個接一個按相反的順序。

i..e。

<ul id="cssmenu_mfarooqi"> 
     <li>menu1</li> 
     <li>menu2 
      <ul> 
       <li>menu11-0</li> 
       <li>menu12-1 
        <ul> 
         <li>menu12-11-0</li> 
         <li>menu12-12-0</li> 
         <li>menu12-13-1 
          <ul> 
           <li>menu12-13-11</li> 
           <li>menu12-13-12</li> 
           <li>menu12-13-13</li> 
           <li>menu12-13-14</li> 
          </ul> 
         </li> 
         <li>menu12-14-0</li> 
        </ul> 
       </li> 
       <li>menu13-0</li> 
       <li>menu14-0</li> 
      </ul> 
     </li> 
     <li>menu3</li> 

現在使用jQuery的..用的代碼下面幾行..

$(document).ready(function(){ 
    $('li').click(function (e) { 
     console.log(e.target); 
    }); 
    }); 

....現在如果我點擊MENU1，我得到下面的結果在控制檯中。

<li>menu1</li> 

，這是完美的..

現在如果我點擊menu11-0然後我得到在控制檯

<li>menu11-0<li> 
<li>menu11-0<li> 

以下行，我點擊menu12-13- 11在控制檯中得到如下結果

<li>​menu12-13-14​</li>​ 
<li>​menu12-13-14​</li>​ 
<li>​menu12-13-14​</li>​ 

...具有子級別的項目顯示在具有完整的兒童UL的控制檯上..

...我實際上使用點擊進一步處理當前對象。但我沒有得到正確的結果。

這裏是預覽http://jsfiddle.net/mfarooqi/y5mftnee/1/

Answer 1

我假設你要登錄控制檯只有一次。

然後，只停留在事件的傳播：

$('li').click(function (e) { 
    e.stopPropagation(); 
    console.log(e.target); 
}); 

的問題是，事件傳播：

在你的情況下，事件監聽器被觸發目標元素並且在事件的泡沫階段期間，其所有li祖先。

但是，如果你停止事件的傳播，它不會再起泡，所以事件監聽器將不會被觸發爲祖先。

Answer 2

您需要停止傳播到電子元件的點擊事件。

$(document).ready(function(){ 
    $('li').click(function (e) { 
     e.stopPropagation(); 
     console.log(e.target); 
    }); 
}); 

Updated fiddle

Answer 3

哎呀..它只是簡單。我一直在網上搜索。並找到解決辦法。

下面是詳細信息Jquery Docs

這種效應被稱爲起泡。如果兄弟姐妹匹配，相同的事件會被多次調用。

解決方案是。

右鍵單擊功能後，我不得不通過下面的代碼行停止冒泡。

我不知道這是唯一的解決方案，但建議和理由仍然需要...

$(document).ready(function(){ 
    $('li').click(function (e) { 
     e.stopPropagation(); 

     console.log(e.target); 
    }); 
    }); 

這爲我工作。

Answer 4

這是正確的行爲，因爲LI標籤是嵌套的。你需要event.stopPropagation()它會阻止事件冒泡DOM樹，阻止任何父處理程序被通知的事件：

$('li').click(function (e) { 
    e.stopPropagation(); 
    // your code... 
}); 

Fiddle在這裏。 OK。