javascript - HTML 按钮即使在获得焦点并且 CSS 规则启动时也不会单击

Question

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

我Chrome，如果点击上边框，即使触发了“:hover”和“:active”css规则，也不会触发事件。如果您在中心单击更多，则可以正常工作。

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

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

谢谢。

Answer 1

这可能会发生，因为 aclick()仅被认为完成一次，mousedown()并且mouseup()连续完成。在顶部边框附近单击的情况下，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;
    }
});

​

Answer 2

我检查了你的代码并发现了一个有趣的错误。它是因为 CSS。即使您可以重新生成该错误。

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

解决方案：

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

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

我希望它有所帮助。

Answer 3

这是我想出的解决方案，它使用 css psudo 元素来捕获点击事件。这里的好处是您不需要 javascript。点击事件总是被 :after 捕获并冒泡到按钮。

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

主要需要注意的是css：

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