按钮点击问题

Question

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

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

我遇到的问题是用户偶尔点击按钮顶部的右侧，无论是在按钮边框下方还是在按钮边框上。 当单击向下时，按钮向下移动，光标不再位于按钮上方。因此，实际上并未注册点击。 我已经在小提琴中复制了这个：

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

如果您在按钮的上边缘单击右侧，按钮会移动，但不会触发单击事件处理程序。我在 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.");
});