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

【问题标题】：HTML button does not click even when is focused and the CSS rules kick inHTML 按钮即使在获得焦点并且 CSS 规则启动时也不会单击
【发布时间】：2012-07-13 04:53:06
【问题描述】：

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

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

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

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

谢谢。

【问题讨论】：

奇怪 - mousedown 事件运行良好.....这很奇怪！
在 css 中我注意到你有按钮 input[type="submit"] 和进一步向下按钮 input[type=submit]

标签： javascript jquery html events button

【解决方案1】：

这可能是因为 click() 仅在 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;
    }
});

【讨论】：

嗯......这很有意义。非常感谢。

【解决方案2】：

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

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

解决方案：

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

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

希望对你有帮助。

【讨论】：

【解决方案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%;
}

【讨论】：