javascript - 当我单击元素的子元素时更改状态(+AngularJS)

Question

目标

当我单击元素 ( <i> ) 的子元素 ( <li> ) 时更改状态

问题

当我点击 <i> 时没有任何反应，即 <li> 的子级.

详细信息

我正在使用 AngularJS 和 ng-click 。请参阅:

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

更新

伙计们，你们是对的——它正在发挥作用!事实上，问题有点远。

参见this jsFiddle 。如果您准确地单击该按钮，控制台会向您检索特定的结果；否则，如果您准确单击该图标，您会收到 $event.target 的另一个响应.

这种行为对我来说不好——它很脆弱。在我的实际应用程序中，我需要与 parent 、 sibling 等合作，这种不一致会带来预期但不想要的结果。

大家能看出我的问题吗？如果是这样，有什么想法吗？

提前致谢!

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 那样的事件委托(delegate)功能，因此您无法专门针对 li 标记。

fiddle 也更新了!

<强> JSFIDDLE