Javascript 点击按钮问题

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

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

我遇到的问题是，用户偶尔会在按钮的顶部单击鼠标右键，无论是在按钮边框的下方还是上方。 单击向下时，按钮向下移动，光标不再位于按钮上方。因此，实际上没有注册单击。 我用小提琴复制了这一点：

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

---

如何解决此问题？

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

另一种方法是处理mousedown和mouseup事件，并检查光标位置是否发生了变化，基本上

click（）

事件受到

：active

状态移动对象的干扰

顺便说一句，你的答案和那个答案有点不同

从@cdanisor提出的解决方案开始，您需要使用

mouseup（）

（以保持按钮的移动效果，并仅在释放鼠标时触发事件）

演示：

---

奇怪的是，DIV并不能解决问题：谢谢。我可以看出这是可行的。一个小问题是它破坏了键盘的兼容性，因为你不能在按钮上按空格键来点击按钮。我猜你可以用鼠标点击一下。它也开始变得杂乱无章，因为我需要绕过相当多的按钮才能工作。我仍然希望有更好的解决办法。可能我需要使用一些不太优雅的按钮！顺便说一句，键盘的问题也出现在你原来的小提琴上：当你可以直接设计

按钮时，为什么用
div
s作为
按钮呢？：）我从按钮开始，在试图找到解决方案的同时，以div结束。我一定是把它复制到JSFIDLE了。谢谢你的更新
<div id="alertMe">
    <div class="button red"> test</div>
</div>

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

<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.");
});