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

Question

我遇到了一个问题，我放置在按钮元素内的 Font-Awesome 图标的左侧两个像素不会触发按钮的点击事件。

这是一个示例按钮：

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

这就是 bootstrap 的样子

带有 Font-Awesome 图标的样式化引导按钮

关于为什么剩下的两个像素不会触发点击事件的任何想法？

编辑：这是我设法重新创建问题的测试站点： http : //ace.cwserve.com

Answer 1

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

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

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

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

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

button > i {
    pointer-events: none;
}

Answer 2

大纲

outline不是 CSS 框的一部分，这意味着它不会触发点击事件。 这可能有点违反直觉，但这就是它的工作原理......

您的页面在.btn:focus上设置了大纲，但这似乎不是问题，因为它的偏移量为 -2（意味着它显示在框内，而不是框外）。

将框移动到 :active

您可以在:active上移动框，这可以产生整洁的效果，但首先移动框，然后触发单击事件，这将使用移动的位置。
您可以通过按住鼠标按钮来查看此操作； 框会移动，但在您释放按钮之前不会触发该事件。 所以如果你把你的盒子向右移动一个像素，那么左边的 10 个像素不会做任何事情。
这是根据规范，来自DOM 规范：

点击
当在元素上单击指针设备按钮时，会发生 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>

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

问题描述

2 个解决方案

解决方案1
9 已采纳 2019-11-28 16:23:06

解决方案2
1 2014-02-09 01:28:57

大纲

将框移动到 :active

例子

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

问题描述

2 个解决方案

解决方案1 9 已采纳 2019-11-28 16:23:06

解决方案2 1 2014-02-09 01:28:57

大纲

将框移动到 :active

例子

解决方案1
9 已采纳 2019-11-28 16:23:06

解决方案2
1 2014-02-09 01:28:57