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。