javascript - 我怎样才能防止嵌套列表的点击事件

Question

<script type="text/javascript" src="/js/jquery1.8.3.js"></script>
<script>
    $(document).ready(function(){
    $("li").has("ul").bind("click",function(e){
        console.log($(this).text());
    });
    });
</script>

<ul>
<li>Fruit
    <ul>
        <li>Apple</li>
        <li>Banana</li>
    </ul>
</li>
</ul>

如何只在点击水果时绑定(bind)点击事件，而不是点击苹果、香蕉

我希望点击Apple或Banana时不会发生点击事件

请帮帮我..

Answer 1

如前所述，一种方法是使用 event.stopPropagation()。我不喜欢这种方法，因为它会阻止页面上的任何其他事件处理程序注册该事件。

更好的方法是检查事件是否起源于另一个 li 元素。像这样的事情会做:

$("li").has("ul").bind("click",function(e){
    if ($(e.target).closest('li').get(0) !== this) {
        return;
    }

    console.log($(this).text());
});

让我们把这里的关键行分开:

• 获取e.target，事件发起的元素
• 用它制作一个 jQuery 对象
• 检查该元素是否为 li 或获取其最近的 li 祖先(closest 执行此操作)
• 将 li 作为原生 DOM 元素获取
• 将 li 与绑定(bind)事件处理程序的那个进行比较

如果 li 元素不同，则事件起源于嵌套的 li。如果它们相同，则不同。

jsFiddle