Question

我在每个li元素上嵌套了无序列表和单击处理程序。当点击嵌套的li时，它会触发两个事件。反正有没有阻止这种行为？

<ul>
    <li>thundercats
        <ul>
            <li>panthero</li>
            <li>cheetarah</li>
        </ul>
    </li>
</ul>

所以在上面的列表中点击“thundercats”会触发一个事件，将值设置为“thundercats”，单击panthero会触发另一个事件，将值设置为panthero。

不幸的是，单击panthero会使值立即正确设置，然后thundercats上的click处理程序将触发并覆盖该值。有没有办法防止这种情况？

Answer 1

一种选择是防止事件冒泡DOM树。这可行，但它不是最佳的，因为有时事件冒泡非常有用。检查事件是否源自正确的元素更好：

$('li').click(function(event) {
    if (this === event.target) {
        // do your code
    }
});

此代码有效，因为this和event.target都指向DOM元素。 this是处理事件处理程序的元素（运行代码的位置），而event.target是事件发起的元素，即被单击的元素。如果它们是相同的元素，则事件是在与处理它的位置相同的元素上触发的;这是您希望代码运行的地方，而不是其他地方。将元素与===进行比较可以实现这一目标。

Answer 2

您需要使用event.stopPropagation。这将使click事件不会冒泡DOM树。

$(document).ready( function () {
   $('li').click(function (evt) {
     // Your code here

     // Stop the event propagation
     evt.stopPropagation();
   })
});

Answer 3

应该像添加：

一样简单

return false;

...到你的事件处理函数。

当事件处理程序返回false时，它会停止事件传播（它实际上与在事件对象上调用.preventDefault（）和.stopPropagation（）相同）。看到你的代码肯定会有所帮助，但听起来会这样做。

单击嵌套列表项上的事件，每个项目都有自己的单击处理程序

3 个答案: