Html链接在某些单击时未注册

Html link not registering on some clicks

本文关键字：注册 单击 链接 Html      更新时间：2023-09-26

我试图创建一个奇特的按钮。问题是，当在文本和按钮底部边缘之间单击click时，不会触发事件。这是jsbin。

似乎是这个代码中的问题：

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

但我需要这个"；"推"；效应那么如何保存效果并恢复点击事件呢？

不要使用box-shadow，使用border-bottom，就像这样：

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

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

这是因为点击事件在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);
});

我希望我能帮忙，干杯

替换

box-shadow: 0 4px black;

带有

border-bottom: 4px solid black;

和

box-shadow:0 2px black;

带有

border-bottom: 2px solid black;

不能单击框阴影，但可以单击边框。

相关文章：