Javascript 字体图标防止单击父按钮
我遇到了一个问题，我在按钮元素中放置的字体超棒图标的左两个像素没有触发按钮的单击事件 下面是一个示例按钮：Javascript 字体图标防止单击父按钮,javascript,css,twitter-bootstrap,font-awesome,Javascript,Css,Twitter Bootstrap,Font Awesome,我遇到了一个问题，我在按钮元素中放置的字体超棒图标的左两个像素没有触发按钮的单击事件 下面是一个示例按钮： <button class="btn btn-mini"> <i class="icon-edit"></i> </button> 下面是引导的样子 你知道为什么剩下的两个像素不会触发点击事件吗 编辑：这是一个测试站点，我在这里重新创建了该问题：大纲 该控件不是CSS框的一部分，这意味着它不会触发单击事件。这可能有点违反直觉，
<button class="btn btn-mini">
<i class="icon-edit"></i>
</button>
.btn:focus：active您可以通过按住鼠标按钮看到这一点；长方体将移动，但在释放按钮之前不会触发事件。因此，如果到那时将方框向右移动10个像素，那么左边的10个像素将不会起任何作用。
这是根据规范，来自： 单击
单击元素上的定点设备按钮时，会发生单击事件。单击被定义为鼠标向下和鼠标向上 在同一屏幕位置。这些事件的顺序是：
- 穆斯敦
- 鼠标
- 点击
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>
正文{左边距：30px；}
div{
背景色：红色；
边框：20px纯绿；
轮廓：20px纯蓝；
宽度：100px；
高度：100px；
位置：相对位置；
}
分区：活动{
左：20px；
顶部：20px；
}
$（'div'）。在（'click'，函数（e）上{
警报（'click！'）；
});
button > i {
pointer-events: none;
}
你能在jsfiddle.net上发布一个例子来说明这个问题吗。我不能，这似乎更多地与我正在使用的框架有关。我将尝试发布一个示例站点。查看CSS检查器，图标或按钮都不显示大纲属性。（很高兴知道）@cswilby它似乎在
.btn:focus