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

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事件源自的元素,即被单击的元素.如果它们是相同的元素,则事件是在与处理它的位置相同的元素上触发的; 这是您希望代码运行的地方,而不是其他地方.比较元素===完成了这一点.