Updated Demo

Question

我在这里设置了一个小提琴，http://jsfiddle.net/zqegh7yz/1/带有以下标记 -

<ul class="list">
    <li class="clickable">item 1
        <ul>
            <li>subitem 1</li>
            <li>subitem 2</li>
            <li>subitem 3</li>
        </ul></li>
    <li>item 2</li>
    <li class="clickable">item 3
        <ul>
            <li>subitem 1</li>
            <li>subitem 2</li>
            <li>subitem 3</li>
        </ul></li>
    <li>item 5</li>
</ul>

我使用以下代码 -

$('.clickable').on('click', function(event){
    $(this).find('ul').slideToggle();
    event.stopPropagation();
});

只能点击具有可点击类的元素。

当我点击其中一个子列表项时，整个li会向上滑动。我只希望在单击父元素而不是其中一个子元素时发生。我怎样才能防止这种情况发生？

Answer 1

当然stopPropagation不适用于您当前的代码 - 因为您只处理.clickable元素上发生的点击事件，但这不是您想要停止冒泡的事件起来;这将是内部列表项上发生的click事件，但由于您没有处理该事件，因此您无法阻止它冒泡。

您应该检查代码中Click事件的目标 - 例如，如果它有类clickable：

$('.clickable').on('click', function (event) {
    if ($(event.target).hasClass('clickable')) {
        $(this).find('ul').slideToggle();
    }
});

http://jsfiddle.net/zqegh7yz/5/

Answer 2

使用event.stopPropagation停止事件冒泡。

http://jsfiddle.net/zqegh7yz/2/

$('.list li').on('click', function(event){
    event.stopPropagation();
    $(this).toggleClass('blue');
});

根据OP的评论：

http://jsfiddle.net/zqegh7yz/4/ 在将单击绑定到元素时，您也可以更具体，因此您可以自由地绑定父级上的另一个事件以进行列表向下滑动

$('.list ul li').on('click', function(event){

    $(this).toggleClass('blue');
});

Answer 3

试试这个stopPropagation()：

阻止事件冒泡DOM树，防止任何事件家长处理人员被告知该事件。

event.stopPropagation()

内部元素单击jQuery

3 个答案:

Updated Demo