html - 使用 :active 伪类时点击处理不一致

Question

谁能解释为什么在这个例子中没有一致地调用点击处理程序？

http://jsfiddle.net/4QBnf/

例如，如果您单击 div 的左上半部分，它不会可靠地递增计数器。

如果我从这个块中删除 padding-top 它工作得很好：

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

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

Answer 1

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

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

CSS 盒模型与 jQuery 盒模型

每当您单击框的上半部分时，从技术上讲，您并不是在单击.click-check，实际上是在单击.count。此图像显示.count相对于的位置.click-check：

jQuery 将此视为一次点击.click-check，但 CSS 不会。数字增加，但不应用 CSS“活动”效果。

您可以通过删除.countdiv 并将所有内容放入.click-check.

jQuery 计数器

第二个问题与您的 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/