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

Question

我在每个 li 元素上嵌套了无序列表和单击处理程序。当单击嵌套的 li 时，它会触发这两个事件。有什么办法可以阻止这种行为吗？

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

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

不幸的是，单击 panthero 会导致该值瞬间正确设置，然后 Thundercats 上的单击处理程序会触发并覆盖该值。有没有办法防止这种情况发生？

Answer 1

一种选择是防止事件在 DOM 树中冒泡。这会起作用，但它不是最佳的，因为有时事件冒泡非常有用。最好检查事件是否源自正确的元素:

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

这段代码之所以有效，是因为 this 和 event.target 都指向 DOM 元素。 this 是处理事件处理程序的元素(运行代码的位置)，而 event.target 是事件发起的元素，即被单击的元素。如果它们是相同的元素，则事件在与处理事件的元素相同的元素上触发；这是您希望运行代码的地方，而不是其他地方。将元素与 === 进行比较即可完成此操作。