即使聚焦并且CSS规则启动，HTML按钮也不会单击

看看这个按钮： http ： //jsfiddle.net/vtortola/Dnxpe/

我是Chrome，如果您单击顶部边框，即使触发了“：hover”和“：active”css规则，也不会触发该事件。 如果您在中心点击更多，那么它工作正常。

在IE9中，如果你这样做，它会错过50％的点击次数。

问题是边距，当您单击边距切换时，给出按钮被按下的效果，但如果您单击顶部边框但这会使指针超出按钮但是……事件应该已经被触发。 ……为什么会这样？

谢谢。

Answer 1

这可能是因为只有mousedown()和mouseup()连续完成后才认为click()完成。 如果在顶部边框附近单击， mouseup()永远不会被触发，对于click()也是如此。

如果你使用mousedown（）它每次都会工作，但它会在整个点击完成之前发生。

 $('button').mousedown(function(e){ $('#clicks').append('click '); }); 

要解决此问题，您可以执行以下操作：

向该按钮添加一个容器，然后将一个mousedown处理程序添加到该按钮，并将一个mouseup处理程序添加到该容器。 如果确保它们都被调用，那么您可以确保已执行按钮上的单击事件。

像这样：

HTML

 
Click me
 
 
​​​​​​​​ 

JavaScript的

 var mdown = false; $('button').mousedown(function(e){ mdown = true; }); $('#cont').mouseup(function(e){ if (mdown) { $('#clicks').append('click '); mdown = false; } });​ 

Answer 2

我检查了你的代码，发现了一个有趣的bug.Its因为CSS。 即使你可以重新生成那个bug。

步骤：1。单击顶部边框附近的按钮，但不要将手指从鼠标上松开。 2.现在，看一下按钮，你的按钮实际上被按下了，这就是为什么，它无法触发按钮点击事件。

解：

按钮处于活动状态时删除边距。

 button:active,input[type=submit]:active { box-shadow: 0px 0px 3px 3px #D8F6CE; } 

我希望它有所帮助。

Answer 3

这是我提出的使用css psudo元素捕获click事件的解决方案。 这里的好处是你不需要javascript。 点击事件始终由以下内容捕获：后面和泡沫到按钮。

http://jsfiddle.net/kevinrockwood/fUuUB/1/

要注意的主要是css：

 button:after{ content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }