Outline(大纲)
The outline isn't part of the CSS box, which means it won't fire click events.
(outline不是CSS框的一部分，这意味着它不会触发点击事件。)
This is perhaps slightly counter-intuitive, but that's how it works ...(这也许有点违反直觉，但这就是它的工作原理...)
Your page sets an outline on .btn:focus , but this doesn't seem to be the problem, since it has an offset of -2 (meaning it's displayed inside the box, rather than outside of it).
(您的页面在.btn:focus上设置了轮廓，但这似乎不是问题，因为它的偏移量为-2（意味着它显示在框内，而不是在框外）。)
Moving the box on :active(将框移到：active)
You can move the box on :active , which can cause neat effect, but first the box is moved, and then will the click event be fired, which will use the moved position .
(您可以在:active上移动框，这会产生整洁的效果，但是首先移动框， 然后触发click事件，它将使用移动的位置 。)
You can see this in action by keeping the mouse button pressed;(您可以通过按住鼠标按钮来查看实际情况。)
the box will move, but the event won't be fired until you release the button.(该框会移动，但是在您释放按钮之前不会触发该事件。)
So if you move your box to the right by then pixels, then the left 10 pixels won't do anything.(因此，如果将框向右移动像素，那么左边的10个像素将无任何作用。)
This is according to spec, from the DOM spec :(这是根据DOM规范中的规范 ：)
click
(点击)
The click event occurs when the pointing device button is clicked over an element.(当在元素上单击定点设备按钮时，将发生click事件。)
A click is defined as a mousedown and mouseup over the same screen location.(单击定义为在同一屏幕位置上按下鼠标并按下鼠标。)
The sequence of these events is:(这些事件的顺序是：)
- mousedown
(按下鼠标)
- mouseup
(鼠标向上)
- click
(点击)
This seems to be the problem, this following CSS seems to solve it:
(这似乎是问题所在，以下CSS似乎可以解决此问题：)
button.btn:active {
left: 1px;
top: 1px;
}
Example(例)
Here's a script to demonstrate both issues:
(这是演示这两个问题的脚本：)
<!DOCTYPE html>
<html><head><style>
body { margin-left: 30px; }
div {
background-color: red;
border: 20px solid green;
outline: 20px solid blue;
width: 100px;
height: 100px;
position: relative;
}
div:active {
left: 20px;
top: 20px;
}
</style></head> <body>
<div></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('div').on('click', function(e) {
alert('click!');
});
</script></body></html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
