html - 使用 :active pseudo class 时点击处理不一致

Question

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

http://jsfiddle.net/4QBnf/

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

如果我从这个 block 中删除 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“事件”效果。

您可以通过删除 .count div 并将所有内容放在 .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/