我遇到了一个问题，我在一个按钮元素中放置了一个 Font-Awesome 图标，但是这个图标的左侧两个像素无法触发该按钮的点击事件。
以下是示例按钮：
<button class="btn btn-mini">
<i class="icon-edit"></i>
</button>
以下是使用Bootstrap的样式：
为什么左侧的两个像素不会触发点击事件？有什么想法吗？
编辑：这里是一个测试网站，在这里我已经成功地重现了这个问题：http://ace.cwserve.com
字体图标阻止父级按钮点击
10
- Cameron Wilby
2
你能否在jsfiddle.net上贴出一个例子来说明这个问题？ - Yuriy Galanter
我不行，这似乎更多地与我正在使用的框架有关。我会尝试发布一个示例网站。 - Cameron Wilby
3个回答
9
我知道这篇文章已经四年了，但它可能会帮助人们理解为什么一个放置在按钮内的font-awesome "图标"会阻止点击事件。
当渲染时，该图标类会向图标标签添加一个::before伪元素，从而阻止了按钮的点击事件。
在这种情况下，我们应该确切地查看CSS pointer-events属性
pointer-events属性定义了一个元素是否对指针事件作出反应。
因此，我们只需要为位于按钮内部的“图标”添加以下css声明：
button > i {
pointer-events: none;
}
- OpSocket
1
我知道这个问题很久以前就被问过了，但是Font Awesome已经添加了使用SVG格式图标的功能，因此如果您在FA Kit设置中启用了SVG，则不能再使用CSS选择<i>元素。您可以使用浏览器的开发工具检查自己，您会看到它现在被包裹在HTML注释中！除非您在FA Kit设置中打开“启用与旧版本的兼容性”。如果启用与旧版FA版本的兼容性不是一个选项，或者您只想使用最新的方法，您可以在CSS文件中使用以下内容代替：
[data-prefix='fas'] {
pointer-events: none;
}
但是如果你发现自己在旧方法和新方法之间切换，你可以使用：
button > i, [data-prefix='fas'] {
pointer-events: none;
}
现在，使用上述任何一种解决方案并使用FA时，单击<button>元素应该会像您预期的那样继续正常工作。
- eBookworm
1
概述
outline不是CSS盒模型的一部分，这意味着它不会触发点击事件。这可能有点反直觉，但这就是它的工作原理...
你的页面为.btn:focus设置了一个轮廓线，但这似乎不是问题所在，因为它有一个-2的偏移量（意味着它显示在框内而不是外面）。
在 :active 时移动框
你可以在:active时移动框，这可以产生很好的效果，但首先框被移动，然后才会触发点击事件，使用移动后的位置。
你可以通过按住鼠标按钮来看到这个过程；框将移动，但直到你释放按钮时才会触发事件。因此，如果你将框向右移动了十个像素，那么左边的10个像素就什么也不会做。
这符合DOM规范的要求:
当指针设备按钮在元素上被点击时，会触发click事件。点击被定义为在同一屏幕位置上进行mousedown和mouseup。这些事件的顺序是：
- mousedown
- mouseup
- click
这似乎是问题所在，下面的CSS似乎可以解决它:
button.btn:active {
left: 1px;
top: 1px;
}
示例
这是一个演示两个问题的脚本：
<!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>
- Martin Tournoij
6
查看CSS检查器，无论是图标还是按钮都没有显示轮廓属性。（虽然这个信息值得知道） - Cameron Wilby
@cswilby 看起来是在
.btn:focus 上 :-) 我已经更新了我的答案。 - Martin Tournoij1刚在Chrome中尝试了一下，但很遗憾没有成功。当我将按钮放大到最大并在编辑图标的左侧线内单击时，点击事件仍未触发 :( - Cameron Wilby
1@Cameron Wilby，你是对的，我很抱歉。我一定是误点了，那个区域真的很小，我见过比我更好的运动技能的三岁孩子。我又更新了我的答案，确保没有误点...我真心希望这次我做对了... - Martin Tournoij
问题一直存在！这是一个棘手的问题。 - Cameron Wilby
@Cameron Wilby 不想听起来居高临下，但你确定吗？我用 Opera（12）和 Firefox 仔细检查了一下，刚刚又进行了双重检查，它确实为我解决了问题。我无法弄清楚如何正确使用 Chrome 的开发工具来禁用
:active 样式（它会被重新启用）。可能有一些应用了 -webkit CSS 的东西，但我没有看到任何 ... 尝试在服务器上注释掉 CSS，以确保 ... - Martin Tournoij网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接