event.target 选择其所有父母

Question

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

即……

<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);
     });
  });

这对我有用。