Question

可能重复：
execute a function only once

我有这段代码，我希望DIV内部框架只移动一次，如果我按一段时间点击它就可以了。

如果我一次点击多次，它将无休止地移动，而不仅仅是一次：/

$(document).ready(function(){
    $(".arrow").click(function(){
        pos = $("#insideframe").css('margin-left');
        pos = (pos.substr(0, 3));
        var posi = parseInt(pos);
        if(posi < -23 ){
            die();
        }else if(posi > -20 ){
            $("#insideframe").animate({
                marginLeft: '-=230'
                }, 800 );
        }
    });
});

如何让它只触发一次？

Answer 1

您可以在发生点击事件时向div添加数据，并在后续点击时检查它。

像这样：

$(document).ready(function(){
    $(".arrow").click(function(){

        //Check here if clicked already and return if so
        if($(this).data('clicked') == 'yes')return;
        $(this).data('clicked', 'yes');

        pos = $("#insideframe").css('margin-left');
        pos = (pos.substr(0, 3));
        var posi = parseInt(pos);
        if(posi < -23 ){
            die();
        }else if(posi > -20 ){
            $("#insideframe").animate({
                marginLeft: '-=230'
                }, 800 );
        }
    });
});

Answer 2

你可以做$(".arrow").one('click', function(){...}。这将使操作只发生一次，但是当您想允许再次单击时，您将不得不重新绑定点击。

另请查看this插件。

每次点击只允许一个动作JQUERY

2 个答案: