Font-Awesome图标阻止在父按钮中单击 [英] Font-Awesome icon preventing click in parent button
问题描述
我遇到的问题是，放置在按钮元素中的Font-Awesome图标的左两个像素不会触发按钮的点击事件。
I'm having a problem where the left two pixels of a Font-Awesome icon I've placed inside of a button element do not trigger the click event of the button.
以下是一个示例按钮：
<button class="btn btn-mini">
<i class="icon-edit"></i>
</button>
这里是使用bootstrap时的样子
And here's what it looks like with bootstrap
任何想法为什么那些左边两个像素不触发点击事件？
Any ideas for why those left two pixels don't trigger a click event?
修改：以下是我已经设法重新创建问题的测试网站： http://ace.cwserve.com
Edit: Here's a test site where I've managed to recreate the issue: http://ace.cwserve.com
推荐答案
/ h3>
outline 不是CSS框的一部分，这意味着它不会触发点击事件。这或许有点反直觉，但这是它的工作原理...
Outline
The outline isn't part of the CSS box, which means it won't fire click events. This is perhaps slightly counter-intuitive, but that's how it works ...
您的页面在 .btn：focus ，但是这似乎并不是问题，因为它有一个偏移-2（意味着它显示在框内，而不是它的外部）。
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).
您可以移动：active 整洁的效果，但首先移动框，然后 将触发点击事件，这将使用移动的位置。
您可以看到这个动作通过保持鼠标按钮按下;该框将移动，但事件不会被触发，直到你释放按钮。因此，如果你将框移动到右边然后像素，那么左边10像素将不会做任何事情。
这是根据规范，从 DOM规格：
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.
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.
This is according to spec, from the DOM spec:
点击
当点击指针设备按钮覆盖元素时，会发生点击事件。在同一屏幕位置上，点击被定义为mousedown和mouseup
。这些事件的顺序是：
click
The click event occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is:
- mousedown
- mouseup
- 点击
这似乎是问题，以下CSS似乎解决了：
This seems to be the problem, this following CSS seems to solve it:
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>
这篇关于Font-Awesome图标阻止在父按钮中单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
