Question

我的问题是，当我导航（点击）时，计数器（a）增加4而不是1（我想也许，这是由于body + html选择器）。所以，我想知道是什么会解决这个问题，我可能只是在增量后减去3或某些模数在某处有帮助吗？

$('body,html').click(function () {
    $('body,html').animate({
        scrollTop: $(test[a]).offset().top
    }, {
        duration: 100,
        queue: false,
        complete: function () {
            // updating a bunch of elements here
            $(somearr[a]).css({
                "background-color":"#fff", 
                "border":"5px solid #ff6600", 
                "margin-left":"-5px"
            });

            a++; // CALLED 4 TIMES!
            console.log(a);
            if (a === 7) {
                a = 0;
                $(filler_six).hide();
                $(filler).show();
            }
            clearDiv();
        }
    }); //end of animation
}); //end of click function
// Clearing The Div's

Answer 1

由于选择器'body，html'，它为body注册了两个点击事件处理程序，为html元素注册了另一个点击事件处理程序。因此，任何单击都会导致事件处理程序因事件传播而被调用twise。这将导致a增加2，因为click事件处理程序被调用两次。

然后再次在每个单击函数中调用html和body元素上的animate，这将导致每次单击调用complete函数两次。因此，每次点击都会将4添加到a

尝试

$('body').click(function(){
    $(this).animate({
        scrollTop: $(test[a]).offset().top
    },{ duration: 100, queue: false, complete: function(){
        $(prvL).css({"background-color":"#fffeec",           "border":"0px solid #ff6600", "margin-left":"0px"});
        $(prvO).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"});
        $(prvA).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvD).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvI).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvN).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvG).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(somearr[a]).css({"background-color":"#fff", "border":"5px solid #ff6600", "margin-left":"-5px"}); 
        a++; //decided to impliment 4 times.
        console.log(a);
        if(a===7){a = 0; $(filler_six).hide(); $(filler).show();}
        clearDiv();     
    }}); //end of animation
}); //end of click function
// Clearing The Div's

适用于Firefox

$('html, body').click(function(e){
    e.stopPropagation();
    $('body').animate({
        scrollTop: $(test[a]).offset().top
    },{ duration: 100, queue: false, complete: function(){
        $(prvL).css({"background-color":"#fffeec",           "border":"0px solid #ff6600", "margin-left":"0px"});
        $(prvO).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"});
        $(prvA).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvD).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvI).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvN).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(prvG).css({"background-color":"#fffeec", "border":"0px solid #ff6600", "margin-left":"0px"}); 
        $(somearr[a]).css({"background-color":"#fff", "border":"5px solid #ff6600", "margin-left":"-5px"}); 
        a++; //decided to impliment 4 times.
        console.log(a);
        if(a===7){a = 0; $(filler_six).hide(); $(filler).show();}
        clearDiv();     
    }}); //end of animation
}); //end of click function
// Clearing The Div's

Answer 2

你绑定body和html所以事件是两次火..（一个用于body，on用于html）。注意多重绑定。

Answer 3

你可以像这样使用一次性代理：

function oneTimeProxy(fn, ctx)
{
  var called = false;

  ctx = ctx || window;

  return function() {
    if (called === false) {
        called = true;
        return fn.apply(ctx, arguments);
    }
  }
}

然后使用它：

$('body,html').animate({
        scrollTop: $(test[a]).offset().top
    }, {
        duration: 100,
        queue: false,
        complete: oneTimeProxy(function () {
            // your code
        })
    }
);

至于附加增量，您需要修改点击处理程序：

$('body,html').click(function (e) {
    e.stopPropagation();
    // the rest of your code

增加4，而不是1

3 个答案: