我遇到了一个问题,我在一个按钮元素中放置了一个 Font-Awesome 图标,但是这个图标的左侧两个像素无法触发该按钮的点击事件。
以下是示例按钮:
<button class="btn btn-mini">
<i class="icon-edit"></i>
</button>
以下是使用Bootstrap的样式:
为什么左侧的两个像素不会触发点击事件?有什么想法吗?
编辑:这里是一个测试网站,在这里我已经成功地重现了这个问题:http://ace.cwserve.com
我遇到了一个问题,我在一个按钮元素中放置了一个 Font-Awesome 图标,但是这个图标的左侧两个像素无法触发该按钮的点击事件。
以下是示例按钮:
<button class="btn btn-mini">
<i class="icon-edit"></i>
</button>
以下是使用Bootstrap的样式:
为什么左侧的两个像素不会触发点击事件?有什么想法吗?
编辑:这里是一个测试网站,在这里我已经成功地重现了这个问题:http://ace.cwserve.com
我知道这篇文章已经四年了,但它可能会帮助人们理解为什么一个放置在按钮内的font-awesome "图标"会阻止点击事件。
当渲染时,该图标类会向图标标签添加一个::before伪元素,从而阻止了按钮的点击事件。
在这种情况下,我们应该确切地查看CSS pointer-events属性
pointer-events属性定义了一个元素是否对指针事件作出反应。
因此,我们只需要为位于按钮内部的“图标”添加以下css声明:
button > i {
pointer-events: none;
}
我知道这个问题很久以前就被问过了,但是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>
元素应该会像您预期的那样继续正常工作。
outline
不是CSS盒模型的一部分,这意味着它不会触发点击事件。这可能有点反直觉,但这就是它的工作原理...
你的页面为.btn:focus
设置了一个轮廓线,但这似乎不是问题所在,因为它有一个-2的偏移量(意味着它显示在框内而不是外面)。
你可以在:active
时移动框,这可以产生很好的效果,但首先框被移动,然后才会触发点击事件,使用移动后的位置。
你可以通过按住鼠标按钮来看到这个过程;框将移动,但直到你释放按钮时才会触发事件。因此,如果你将框向右移动了十个像素,那么左边的10个像素就什么也不会做。
这符合DOM规范的要求:
这似乎是问题所在,下面的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>
.btn:focus
上 :-) 我已经更新了我的答案。 - Martin Tournoij:active
样式(它会被重新启用)。可能有一些应用了 -webkit
CSS 的东西,但我没有看到任何 ... 尝试在服务器上注释掉 CSS,以确保 ... - Martin Tournoij