Question

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

这是一个示例按钮：

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

这就是bootstrap的样子

Styled bootstrap button with Font-Awesome icon within

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

修改：这是一个测试网站，我设法重新创建了该问题：http://ace.cwserve.com

Answer 1

概要

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

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

开启此框：激活

您可以移动:active上的框，这可能会导致整洁的效果，但首先移动框，然后将触发click事件，将使用移动的位置 您可以通过按住鼠标按钮来查看此操作;该框将移动，但在释放按钮之前不会触发该事件。因此，如果您将框移动到右边的像素，那么左边的10个像素将不会执行任何操作根据规范，来自DOM spec：

点击
  单击指向设备按钮时，会发生单击事件。单击被定义为mousedown和mouseup   在同一屏幕位置。这些事件的顺序是：


鼠标按下

鼠标松开

点击

这似乎是问题所在，以下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>

Answer 2

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

在渲染后，图标类将 ::之前伪元素添加到图标标签中，以防止按钮的点击事件。

鉴于这种情况，我们应该明确看看CSS pointer-events Property

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

因此，我们只需要为按钮内的图标添加此css声明：

button > i {
    pointer-events: none;
}

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

2 个答案:

概要

开启此框：激活

实施例