javascript - 按钮点击问题

Question

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

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

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

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

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

我该如何解决这个问题？

Answer 1

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

在这里阅读更多。

顺便说一句，您的解决方案与那个答案有点不同；

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

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

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

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

---

编辑

显然，您可以通过使用 abutton而不是 a来保持键盘兼容性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.");
});

Answer 2

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

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