javascript - 内部元素单击 jQuery

Question

我在这里设置了一个 fiddle 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();
});

只有类为 clickable 的元素才能被点击。

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

Answer 1

当然 stopPropagation 不适用于您当前的代码——因为您只处理发生在 .clickable 元素上的点击事件，但这不是事件您想停止冒泡；那将是发生在内部列表项上的点击事件，但由于您不处理该事件，因此您也无法阻止它冒泡。

您应该检查代码中点击事件的目标——例如，如果它有类clickable:

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

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