Javascript 内部元素单击jQuery

我用下面的标记在这里设置了一个小提琴-

<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的元素

---

当我单击子列表中的一个项目时，整个li向上滑动。我只希望在单击父元素而不是子元素时发生。如何防止这种情况发生？

使用

event.stopPropagation

停止事件冒泡

根据OP的评论：

在将单击绑定到元素时，您还可以更具体一些，这样您就可以自由地绑定父元素上的另一个事件，以进行列表滑动和向下移动

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

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

---

使用

event.stopPropagation

停止事件冒泡

根据OP的评论：

在将单击绑定到元素时，您还可以更具体一些，这样您就可以自由地绑定父元素上的另一个事件，以进行列表滑动和向下移动

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

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

试试这个：

防止事件在DOM树中冒泡，防止任何 父处理程序不会收到事件通知

试试这个：

防止事件在DOM树中冒泡，防止任何 父处理程序不会收到事件通知

---

当然，

stopPropagation

不适用于您当前的代码–因为您只处理发生在

元素上的单击事件。可单击的

元素，但这不是您想要停止冒泡的事件；这将是在内部列表项上发生的单击事件，但由于您不处理该事件，因此也无法阻止它冒泡

您应该在代码中检查click事件的目标–例如，如果它有类

clickable

：

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

---

当然

stopPropagation

不适用于您当前的代码–因为您只处理发生在

元素上的单击事件。可单击的
元素，但这不是您想要停止冒泡的事件；这将是在内部列表项上发生的单击事件，但由于您不处理该事件，因此也无法阻止它冒泡

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

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

对不起，我已经试过了，但是忘记更新问题了。请参阅更新的question@NaeemShaikh：没问题。我看不见/没看见update@NaeemShaikh请看这更具体。我希望幻灯片切换只使用可以单击的元素，即li。clickable@NaeemShaikh，单击列表子项不应滑动，这是不可取的。只有li.clickable当单击时才应该滑动up/slidedown对不起，我已经尝试过了，但是忘记更新问题了。请参阅更新的question@NaeemShaikh：没问题。我看不见/没看见update@NaeemShaikh请看这更具体。我希望幻灯片切换只使用可以单击的元素，即li。clickable@NaeemShaikh，单击列表子项不应滑动，这是不可取的。单击时，只有li.clickable应该滑动/滑动下降，或者您也可以添加
返回false
而不是
stopPropagation（）
以避免事件冒泡。@AWolf，stopPropagation在我的情况下不起作用。不知道为什么。用fiddleother选项试试，也可以添加
returnfalse
而不是
stopPropagation（）
以避免事件冒泡。@AWolf，stopPropagation在我的情况下不起作用。不知道为什么。使用fiddleother备选方案进行尝试抱歉，我已经尝试了event.stopPropagation（）但在我的案例中无效请查看更新的问题。Ohhh@SnorkS我误解了问题：（抱歉，我已经尝试了event.stopPropagation（）但在我的案例中无效请查看更新的问题。Ohhhh@SnorkS我误解了问题：(
$('.clickable').on('click', function (event) {
    if ($(event.target).hasClass('clickable')) {
        $(this).find('ul').slideToggle();
    }
});