内部元素单击 jQuery

Question

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

<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();
});

只有 class 可点击的元素才能被点击。

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

Answer 1

使用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 2

试试这个 stopPropagation():

Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

event.stopPropagation()

Updated Demo

Answer 3

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

您应该检查代码中点击事件的 target – 例如，如果它有 class clickable:

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

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

内部元素单击 jQuery

Inner Elements Click jQuery

javascript

css

jquery

web

Updated Demo