使用时的单击处理不一致：active伪类

Question

有人可以解释为什么在这个例子中没有一致地调用click处理程序吗？

http://jsfiddle.net/4QBnf/

例如，如果单击div的左上半部分，则无法可靠地递增计数器。

如果我从这个块中移除了填充顶部，它可以正常工作：

.click-check:active {
   background-color:blue;
   padding-top: 25px;
}

我已经在许多不同的浏览器中测试了它，它的行为方式相同。

Answer 1

我发现您的代码存在两个可能的问题。您可以在此处查看修复程序：

http://jsfiddle.net/4QBnf/6/

CSS Box模型与jQuery Box模型

每当您点击框的上半部分时，您实际上没有点击.click-check，实际上您点击了.count。此图片显示.count相对于.click-check的位置：

jQuery认为这是对.click-check的点击，但CSS没有。数字递增，但不应用CSS“活动”效果。

您可以通过移除.count div并将所有内容放在.click-check内来解决此问题。

jQuery Counter

第二个问题是你的jQuery代码。该代码目前正在读取：

$('.click-check').click(function() { $('.count').html(count++); });

直到此行完成后才会增加

count。这意味着第一次点击似乎没有效果。

此行将增加count，然后将其显示给用户：

$('.click-check').click(function() { $('.click-check').html(++count); });

我已在此处对您的示例应用了这两个更新：

http://jsfiddle.net/4QBnf/6/

更新

解决问题的另一种方法是通过jQuery完成所有工作。这将所有外观和逻辑同步到单个箱模型解释中。

var count=0;
$('.click-check').mousedown(function() { 
    $('.click-check').addClass("active");
    $('.click-check').html(++count);

    setTimeout(function(){ 
       $('.click-check').removeClass("active");
    }, 50);

});

http://jsfiddle.net/4QBnf/15/