按钮事件和点击深度答案

【问题标题】：Button events and click depth按钮事件和点击深度
【发布时间】：2012-11-10 17:45:54
【问题描述】：

我有一些按钮，它们被赋予了点击深度（即它们在 :active 状态下向下移动了几个像素），但它们会导致问题，因为有时按钮被点击并且没有任何反应。

<button>Button</button>

button:active {
    margin-top: 5px;
}

我已经在 jsfiddle 中说明了这个问题：

在 Chrome 中，文本上方和下方都有一条细条，高度等于点击深度，其中不会触发点击事件。（例如，尝试单击“B”上方的一两个像素）同时接收到 mousedown 和 mouseup，但单击不会触发。

在 Firefox 和 Opera 中，在按钮顶部有一个相同大小的区域，在该区域中鼠标单击没有响应。我发现这更合乎逻辑，因为 mousedown 在按钮内部，而 mouseup 在按钮外部。如果我在该区域向下单击，但在释放之前将鼠标拖回按钮，则会激活单击。

但是，它仍然不完全有意义 - 如果我在按钮周围包裹一个容器（以便所有按钮状态都包含在其中），并检测容器上的事件，问题仍然存在。

如果我删除点击深度，一切都很好。

我想我可以让它响应 mousedown 事件，然后检测文档上的 mouseup，这可能会绕过它 - 但它违反了正常的按钮行为，我想要一个非 JavaScript 解决方案。有人可以帮忙吗？

【问题讨论】：

【解决方案1】：

如果您可以使用 padding-top 使 :active 样式工作（或边框内的任何东西 - 即使将边框顶部设置为 5px 也可以工作，抱歉未经测试）。虽然这当然会有点破坏你的风格；如果您需要，一个背景顶部对齐的水平条图像可以替换顶部边框，虽然这是一个 hacky 想法）。

抱歉，目前无法在较新的浏览器中进行测试。我之前在几个地方看到过这种类型的按钮，但不记得有任何临时测试他们处理这个问题的能力/他们使用什么代码。

几乎把这个变成了一个新的答案，但 SO 不太喜欢这个：我见过的另一种选择是在边框样式中使用 inset 和 outset，虽然很难添加非常大的深度（移动）。

【讨论】：