Question

目标

点击元素（<i>）的孩子（<li>）时更改状态

问题

当我点击<i>的孩子<li>时，没有任何反应。

详细

我正在使用ng-click的AngularJS。参见：

<li ng-click="openNavigator($event)">
    <i class="ico ico-home"></i>
</li>

更新

伙计们，你说得对 - 它正在发挥作用！实际上，问题还有一点。

见this jsFiddle。如果您完全单击该按钮，控制台将向您返回特定结果;否则，如果您完全点击该图标，则会收到$event.target的其他回复。

这种行为对我不利 - 它很脆弱。在我的实际应用程序中我需要与父母，兄弟姐妹等一起工作，并且这种不确定性会释放出预期但不受欢迎的结果。

你们都能看到我的问题吗？如果是这样，想法？

提前致谢！

Answer 1

<强> HTML

<div ng-app='currentApp' ng-controller='ACtrl'>
    <li class="btn btn-primary">
        <i class="fa fa-phone" ng-click="openNavigator($event)"></i>
    </li>
</div>

<强> CONTROLLER

currentApp.controller('ACtrl', ['$scope', function ($scope, $event) {
    $scope.openNavigator = function($event) {
        var target = $event.target['parentElement' || 'patentNode'];
        console.log('li parent', target);
    }
}]);

由于i标记是li的子标记且点击事件不一致，我建议您在点击时定位i标记，然后抓住父标记。你可以说这是冒泡的，这是正确的，所以要修复它以i为目标并且它不会冒泡。

这是一个问题的主要原因是因为AngularJS没有像jQuery那样的事件委托功能，所以你不能专门针对li标签。

小提琴也得到了更新！

<强> JSFIDDLE

Answer 2

它应该工作。这是plunker

单击元素的子元素时更改状态（+ AngularJS）

目标

问题

详细

更新

2 个答案: