Question

我有一个用于选择的切换列表。问题是有时候，li元素上的click事件会被触发两次。 .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再次出现。

jQuery单击处理程序有时会触发两次

1 个答案: