jquery - jQuery 点击处理程序有时会触发两次

Question

我有一个用于选择的切换列表。问题是有时，li 元素上的点击事件会被触发两次。.config div 上的切换工作正常，但由于它是列表的父级，我认为那里可能有一些东西。有人知道这里会发生什么吗？

HTML：

<div class="config">
    <div class="select-list hidden">
        <ul>
            <li>Something 1</li>
            <li>Something 2</li>
            <li>Something 3</li>
        </ul>
    </div>
</div>

jQuery：

$('body').on('click', '.config', function(e) {
    if (e.target == this) {
        $(this).find('.select-list').toggleClass('hidden');
    } else {
        e.stopPropagation();
    }
});

$('body').on('click', '.select-list li', function() {
    $(this).toggleClass('selected');
});

Answer 1

将您的第二段代码更改为：

$('body').on('click', '.select-list li', function(e) {
    e.stopPropagation();
    $(this).toggleClass('selected');
});

当您单击列表项时，click 事件将 DOM 冒泡到 .config div 并触发其上的 click 事件，从而导致 toggleClass 再次发生。