单击按钮内容

Question

我在html模板中有一些按钮，由AngularJS指令控制。单击按钮内容（图标和跨度）时单击按钮ng-click事件不会触发，单击填充或空白处的任何位置都可以正常工作...

这只是Safari中的一个问题。
我正在使用AngualrJS 1.4 图标位于i元素中，使用类从字体文件中查找我想要的图标。

<button ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
    <i class="icon icon-awesome"></i>
    <span>Awesome</span>
</button>

点击绿色或橙色区域可以正常工作。 右侧的图像，点击蓝色元素，不会触发点击。

我试过搞乱z-index，我看看是否有图标和span元素捕获点击并阻止它传递给按钮（据我所知，它们不是... 。）

Answer 1

试试这个：

<a href="javascript:void(0)" ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
    <i class="icon icon-awesome"></i>
    <span>Awesome</span>
</a>

Answer 2

我设法使用z-index使其工作。 为z-index设置位置所需的图标和跨度有效。

我将以下内容添加到我的.scss文件中。

.awesome {
  .icon {
    position: relative;
    z-index: 1;
  }
  span {
    position: relative;
    z-index: 1;
  }
}

我不确定是什么捕获了点击事件，但这似乎已经修复了我的具体情况。

Answer 3

对我来说，解决方案是在<button>标记内移动 ng-click 。我之前在<span>中使用过它，它在Chrome中运行，但在Firefox和IE中没有 ng-click 驻留在<button>而不是<span>标签后，它可以在所有三个浏览器中运行，没有错误。
这是我的结果代码：

    <button class="btn btn-default btn-xs" ng-click="myFunction()">
    <span class="glyphicon glyphicon-th-list">
    </span></button>

希望这有帮助。