Font-Awesome图标阻止单击父按钮

Question

我遇到的问题是,我放置在按钮元素内的Font-Awesome图标的左侧两个像素不会触发按钮的单击事件.

这是一个示例按钮:

<button class="btn btn-mini">
    <i class="icon-edit"></i>
</button>

这就是bootstrap的样子

为什么那些留下两个像素的想法不会触发点击事件？

编辑:这是一个测试网站,我设法重新创建了这个问题:http://ace.cwserve.com

Answer 1

我知道这篇文章已经有 4 年的历史了，但它可能会帮助人们理解为什么按钮内的字体很棒的“图标”会阻止点击事件。

渲染时，图标类向图标标记添加一个::before伪元素，以防止按钮的单击事件。

鉴于这种情况，我们绝对应该看看CSS 指针事件属性

pointer-events 属性定义元素是否对指针事件做出反应。

所以我们只需要为按钮内的“图标”添加这个 css 声明：

button > i {
    pointer-events: none;
}