我有按钮已经给出点击深度(即它们向下移动几个像素：活动状态)但它们导致问题,有时按钮被点击,没有任何反应.
<button>Button</button>
button:active {
margin-top: 5px;
}
我在一个jsfiddle中说明了这个问题：
http://jsfiddle.net/helenst/vUU55/
在Chrome中,文本上方和下方有一条细条,高度等于点击深度,其中点击事件不会触发. (例如,尝试点击“B”上方的一两个像素)收到mousedown和mouseup,但点击不会触发.
在Firefox和Opera中,按钮顶部有一个相同大小的区域,鼠标单击时没有响应.我觉得这更合乎逻辑,因为mousedown在按钮内,但是mouseup在它之外.如果我在此区域中单击,但在释放之前将鼠标拖回按钮,则会激活单击.
但是,它仍然没有完全有意义 – 如果我在按钮周围包装一个容器(以便所有按钮状态包含在其中),并检测容器上的事件,问题仍然存在.
如果我删除点击深度,一切都很好.
我想我可以让它响应mousedown事件,然后检测文档上的mouseup,这可能会解决它 – 但它违反了正常的按钮行为,我想要一个非JavaScript的解决方案.有人可以帮忙吗？
解决方法
如果你可以使用padding-top(或边框内的任何东西)使：active样式工作 – 甚至将border-top设置为5px也可以工作,抱歉未经测试.虽然当然会在某种程度上打破你的造型;背景顶部对齐的水平条形图像可以替换顶部边框,如果你需要它,虽然一个hacky的想法).
道歉,目前无法在较新的浏览器中测试.我以前在几个地方看过这种类型的按钮,但不记得任何随便测试他们如何处理这个问题/他们使用什么代码.
几乎把它作为一个新的答案,但SO不那么喜欢：我见过的另一个替代方案,虽然更难以添加非常大的深度(移动),但是在边框样式中使用插入和开始.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。