单击按钮内容时无法触发按钮的 ng-click

Question

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

这只是 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 并且我查看了图标和跨度元素是否正在捕获点击并阻止它被传递到按钮（据我所知它们不是...)

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

对我来说，解决方案是将 ng-click 移动到 <button> 标签内。我以前在 <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>

希望对您有所帮助。

单击按钮内容时无法触发按钮的 ng-click

Unable to trigger ng-click on a button when you click the button contents

html

angularjs

safari

angularjs-ng-click