event.target选择其所有父项

Question

如果我点击任何LI，我会以相反的顺序逐一选择所有的父母或最接近的父母。

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

这是正确的行为，因为LI标记是嵌套的。你需要event.stopPropagation()它可以阻止事件冒泡DOM树，防止任何父处理程序被通知事件：

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

Fiddle就在这里。

Answer 4

哎呀..这很简单。我一直在网上搜索。并找到了解决方案。

以下是详细信息Jquery Docs

这种效应叫做冒泡。如果兄弟姐妹匹配，则会多次调用同一事件。

解决方案是。

点击功能后，我必须按照以下代码行停止冒泡。

我不知道这是否是唯一的解决方案，但仍需要建议和理由......

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

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

这对我有用。