按钮单击问题

Question

我使用的按钮在点击时会向下移动。

.button:active {
    position: relative;
    top: 2px;
}

我遇到的问题是用户偶尔会点击按钮顶部的正确位置，或者只是在按钮边框的下方或上方。 当点击下降时，按钮向下移动，光标不再在按钮上方。因此，实际上没有注册点击。 我用小提琴复制了这个：

http://jsfiddle.net/DJNEb/3/

如果单击按钮顶部的右边缘，则按钮会移动，但不会触发click事件处理程序。我在IE，Firefox，Chrome中看到了这种行为。

我该如何解决这个问题？

Answer 1

我会将按钮放在div中并在div上添加事件，这样您就可以保持效果而不会使代码过于复杂。

另一种方法是处理mousedown和mouseup事件并检查光标位置是否已更改

Answer 2

基本click()事件受到:active状态移动对象的干扰。

Read more here.

顺便说一下，你的解决方案与那个答案略有不同;

从@cdanisor提出的解决方案开始，您需要使用mouseup()（为了保留按钮的移动效果并仅在释放鼠标时触发事件）

演示：http://jsfiddle.net/kEQjU/

<div id="alertMe">
    <div class="button red"> test</div>
</div>

$("#alertMe").mouseup(function() {
    alert("Handler for .click() called.");
});

---

修改

显然，您可以使用button代替div来保留键盘兼容性，并将相同的功能绑定到keyup事件：

演示：http://jsfiddle.net/kEQjU/1/

<div id="alertMe">
    <input type="button" class="button red" value="test" /> 
</div>

$("#alertMe").mouseup(function() {
alert("Handler for .click() called.");
});
$("#alertMe").keyup(function() {
alert("Handler for .click() called.");
});