HTML鏈接未在某些點擊中注冊

Question

我試圖創建一個精美的按鈕。 問題是僅在文本和按鈕click事件的底部邊緣之間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上觸發，而mousedown顯然在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;

您不能單擊方框陰影，但是可以單擊邊框。