Question

我试图创建一个花哨的按钮。在按钮click事件的文本和下边缘之间单击时不会触发的问题。这是jsbin。

这段代码似乎是个问题：

.button:active {
  top:2px;
  box-shadow:0 2px #36c
}

但我需要这种“推动”效果。那么如何保存效果并获得点击事件呢？

Answer 1

请勿使用box-shadow，请使用border-bottom，如下所示：

.button {
    border-bottom: 4px solid #000;
}

.button:active {
    border-bottom: 2px solid #000;
}

演示：http://jsbin.com/IGUReWO/1/

Answer 2

那是因为click事件会在mouseup上触发，而moused显然会在mousedown上被触发。我只能重现你描述的行为，如果我点击按钮并将鼠标放在它外面。

如果你想要推送效果，可以附加mousedown事件而不是click事件，并将其延迟几毫秒，例如：

$('.button').on('mousedown', function() {
  window.setTimeout(function() {
    var val = parseInt($('.mousedown span').html(), 10);
    val++;
    $('.mousedown span').text(val);
    return false;
  }, 200);
});

我希望我能提供帮助，干杯

Answer 3

替换

box-shadow: 0 4px black;

带

border-bottom: 4px solid black;

和

box-shadow:0 2px black;

与

border-bottom: 2px solid black;

您无法点击框阴影，但可以点击边框。

Html链接没有注册一些点击

3 个答案: