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

Question

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

我试试这个：

    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

Answer 1

使用.one() instead of .click() and re-register the event handler in the complete callback of .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>

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

How to avoid jquery .click() event spam

jquery

events

triggers

click

spam