HTML按钮即使在聚焦时也不会点击，CSS规则也会生效

HTML button does not click even when is focused and the CSS rules kick in

本文关键字：CSS 规则 按钮 聚焦 HTML      更新时间：2023-09-26

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

在Chrome浏览器中，如果你点击顶部边框，即使"：hover"answers"：active"css规则触发，事件也不会触发。如果你在中心点击更多，那么效果很好。

在IE9中，如果你也这样做，它会错过50%的点击。

问题是边距，当你点击边距开关时，会产生按钮被按下的效果，但如果你点击顶部边框，这会使指针离开按钮，但。。。事件应该已经被触发了。。。。为什么会发生这种情况？

谢谢。

这可能是因为只有在mousedown()和mouseup()相继完成时，click()才被认为是完整的。在点击顶部边界附近的情况下，mouseup()永远不会被触发，click()也是如此。

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

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

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

向按钮添加容器，然后向按钮添加mousedown处理程序，向容器添加mouseup处理程序。如果您确保它们都被调用了，那么您就可以确保在按钮上执行了单击事件。

像这样：

HTML

<div id="cont"><button>Click me</button></div>
<div id="clicks">
</div>​​​​​​​​

JavaScript

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

我检查了您的代码，发现了一个有趣的bug。这是因为CSS。甚至你也可以重新生成那个bug。

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

解决方案：

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

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

我希望它能有所帮助。

以下是我提出的使用css psudo元素捕获点击事件的解决方案。这里的好处是您不需要javascript。单击事件始终由：after和冒泡按钮捕获。

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

需要注意的主要内容是css：

button:after{
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
相关文章：