按钮事件和点击深度

Question

4

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

<button>Button</button>

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

我在jsfiddle中展示了问题：http://jsfiddle.net/helenst/vUU55/。

在Chrome中，文本上下各有一条高度与点击深度相等的细线，其上的点击事件不会触发。（例如，尝试在“B”字母上方点击一个像素或两个像素）鼠标按下和松开都会被接收到，但是点击不会触发。

在Firefox和Opera中，按钮顶部也有同样大小的区域，鼠标点击无响应。我认为这更合理，因为鼠标按下在按钮内部，但鼠标松开在按钮外部。如果我在此区域按下并将鼠标拖回按钮内再释放，则会激活点击。

然而，这仍然不完全合理 - 如果我将容器包装在按钮周围（以便所有按钮状态都包含在其中），并在容器上检测事件，则问题仍然存在。

如果我去掉点击深度，一切都好了。

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

- helenst

1

在我看来，为了触发“ click”事件，事件目标必须在“ mousedown”和“ mouseup”时相同。即使将处理程序绑定到容器上，也不是这种情况。 - Felix Kling

所以你的意思是，即使我在 div 上处理事件，按钮仍然是事件目标？有没有办法改变这个？ - helenst

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Breezer · Accepted Answer

如果您可以使用padding-top（或边框内的任何内容 - 即使将border-top设置为5px也可以，抱歉未经测试）使:active样式起作用。当然，这会破坏您的样式; 如果您需要在其中添加顶部对齐的水平条形背景图像，则可以替换顶部边框，尽管这是一个hacky的想法。

抱歉，目前无法在更新的浏览器中进行测试。我以前在几个地方看到过这种类型的按钮，但无法记住任何一个来测试它们如何处理此问题/使用什么代码。

几乎要将其作为新答案发布，但SO不太喜欢这样做：另一种选择是我见过的，虽然更难添加真正大的深度（运动），但是可以在边框样式中使用inset和outset。