Question

我想知道如何防止多次点击，或者因为多次点击而多次触发一个事件。

假设我必须为对象设置动画。一个按钮将触发动画，另一个按钮将重置动画。

<div class="div">
   Animate Me!
</div>
<div class="nav">
    <div class="start">start</div>
    <div class="reset">reset</div>
</div>

我不关心用户点击“星形”按钮的次数，动画必须只触发一次。这并不意味着将来不再能够触发动画。重置动画时，可以再次触发动画，依此类推。

$( '.start' ).click(function(){
    $('.div').animate({
        left: '+=' + 100});
});

$( '.reset' ).click(function(){
    $('.div').animate({
        left: 50});
});

以下是我愿意做的一个例子：fiddle

尝试在“开始”按钮上尽可能多地点击，然后根据点击次数触发动画。

我在网上查了一下，发现有两种方法可以阻止多次点击。但似乎他们不能和我合作。

1）使用.unbind（）found here：

$( '.reset' ).unbind().click(function(){
    $('.div').animate({
        left: 50});
});

但不起作用：fiddle;

2）使用event.stopImmediatePropagation found here：

$( '.reset' ).click(function(event){
event.stopImmediatePropagation()
    $('.div').animate({
        left: 50});
});

也不起作用。 fiddle;

如何防止“开始”按钮多次触发动画？但是点击“重置”按钮时要点击？

Answer 1

您可以在开始按钮中添加帮助类，如果单击重置按钮，则将其删除。

$('.start').click(function () {
    if(!$(this).hasClass('move')){
        $(this).addClass('move');
        $('.div').animate({
            left: '+=' + 100
        });
    }
});

$('.reset').click(function () {
    $('.start').removeClass('move');
    $('.div').animate({
        left: 50
    });
});

Fiddle

更好：

$('.nav').on('click', '.start:not(.move)', function () {
    $(this).addClass('move');
    $('.div').animate({
        left: '+=' + 100
    });
});

$('.reset').click(function () {
    $('.start').removeClass('move');
    $('.div').animate({
        left: 50
    });
});

Fiddle

Answer 2

使用jquery $( '.start' ).click(function(){ var div = $('.div:not(.animated)'); div.animate({ left: '+=' + 100}).addClass('animated'); }); $( '.reset' ).click(function(event){ var animated = $('.div.animated'); animated.animate({ left: 50}).removeClass('animated'); });方法http://api.jquery.com/one/。

.div {
    position: absolute;
    top: 150px;
    left: 50px;
    height: 100;
    width: 100;
    background-color: blue;
}

.start, .reset {
    display: table-cell;
    width:50%;
}

.start {
    background-color:green;
}

.reset{
    background-color:red;
}

}
.nav {
    position: absolute;
    width: 100%;
    top: 0;
    right: 0;
    left: 0;
    height: 60px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div">
   Animate Me!
</div>
<div class="nav">
    <div class="start">start</div>
    <div class="reset">reset</div>
</div>

{{1}}

如何防止多次点击触发多个动画

2 个答案: