如何避免 jquery .click() 事件垃圾邮件答案

【问题标题】：How to avoid jquery .click() event spam如何避免 jquery .click() 事件垃圾邮件
【发布时间】：2015-01-22 20:28:43
【问题描述】：

我想知道如何保护 jQuery .click() （或其他）事件以防止生成。我在 JSFiddle 中创建了一个项目文件，你可以在上面设置它。如果您始终可以单击<body>，则下一个<li> 项始终会获得.curr-str 类，但动画尚未完成。

我试试这个：

    if($('body').is(':animated'){
alert("animate is progress, wait");
}

但它不工作......

测试代码：

HTML：

<div class="list">

    <ul>
        <li class="curr-str">JavaScript</li>
         <li>JavaScript</li>
         <li>JavaScript</li>
         <li>JavaScript</li>

    </ul>

</div>

CSS：

.curr-str{
    background-color:green;
}

Javascript：

$( 'body' ).click(function() {
    $current = $(".curr-str");
  $( $current ).next('li').addClass('curr-str').fadeOut(5000);
});

JSFiddle

【问题讨论】：

标签： jquery events triggers click spam

【解决方案1】：

使用.one()代替.click()，并在.fadeOut()的完整回调中重新注册事件处理程序

$(function () {
    var body = $("body");
  
    body.one("click", removeListElement);

    function removeListElement() {
        var current = $(".curr-str");
        $(current).next('li').addClass('curr-str').fadeOut(5000, function() {
            body.one("click", removeListElement);
        });
    }
});

.curr-str {
    background-color:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
    <ul>
        <li class="curr-str">JavaScript</li>
        <li>JavaScript</li>
        <li>JavaScript</li>
        <li>JavaScript</li>
    </ul>
</div>

【讨论】：