javascript - jQuery - 不允许父母的点击事件有一些子元素？

Question

我有一个这样的html代码：

<div class="pagination">
    <ul>
        <li class="prev"><span>&#8592;</span></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li class="next"><a href="javascript::void(0)">&#8594;</a></li> 
    </ul>
</div><!-- .pagination -->

当我为 li 标签添加点击事件时，我想点击li标签没有 span子元素。这意味着如果我点击它，除了其他我可以点击并做某事之外什么都不做。我该怎么做？

Answer 1

您可以结合使用:not()和:has()伪选择器来做到这一点：

$('.pagination ul li:not(:has(span))').on('click', function() {
    // do stuff
});

小提琴

这样做似乎更容易：

$('.pagination ul li a').on('click', function(e) {
    e.preventDefault();
    // do stuff
});