Font-Awesome 图标阻止点击父按钮
[英]Font-Awesome icon preventing click in parent button
问题描述
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.
我遇到了一个问题，我放置在按钮元素内的 Font-Awesome 图标的左侧两个像素不会触发按钮的点击事件。
Here's an example button:这是一个示例按钮：
<button class="btn btn-mini">
<i class="icon-edit"></i>
</button>
And here's what it looks like with bootstrap这就是 bootstrap 的样子
Any ideas for why those left two pixels don't trigger a click event?关于为什么剩下的两个像素不会触发点击事件的任何想法？
Edit : Here's a test site where I've managed to recreate the issue: http://ace.cwserve.com编辑：这是我设法重新创建问题的测试站点： http : //ace.cwserve.com
2 个解决方案
解决方案1
9 已采纳 2019-11-28 16:23:06
I know this post is 4 years old but it might help people understand why a font-awesome "icon" inside a button prevents the click event.我知道这篇文章已经有 4 年的历史了，但它可能会帮助人们理解为什么按钮内的字体很棒的“图标”会阻止点击事件。
When rendered, the icon class adds a ::before pseudo-element to the icon tag that prevents the button's click event.渲染时，图标类向图标标记添加一个::before伪元素，以防止按钮的单击事件。
Given this situation, we should definitly take a look at the CSS pointer-events Property鉴于这种情况，我们绝对应该看看CSS 指针事件属性
The pointer-events property defines whether or not an element reacts to pointer events.
So we just need to add this css declaration for the "icon" which is inside a button:所以我们只需要为按钮内的“图标”添加这个 css 声明：
button > i {
pointer-events: none;
}
解决方案2
1 2014-02-09 01:28:57
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上移动框，这可以产生整洁的效果，但首先移动框，然后触发单击事件，这将使用移动的位置。
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.
- 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.