AngularJS中如何利用DOM事件冒泡/传播 绑定父元素监听子元素点击事件

你写的基础逻辑是正确的，无法触发操作的核心原因是：当点击位置落在li内部的文本节点或其他内嵌子元素上时，$event.target 不会是li元素本身，导致class判断失败，做如下调整即可正常运行：

调整后完整代码 #

HTML部分 #

<section ng-app="myApp" ng-controller="myCtrl">
    <ol ng-click="addColor($event)">
        <li class="item" ng-repeat="x in products">{{x}}</li>
    </ol>
</section>

JS部分 #

兼容全浏览器写法

var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) {
    $scope.products = ["Tea", "Coffee", "Chocolate", "Akamu", "Ogi"];
    $scope.addColor = function($event) {
        let targetEl = $event.target;
        // 向上查找最近的.item元素，到绑定事件的ol元素就停止
        while (targetEl && targetEl !== $event.currentTarget) {
            if (targetEl.classList.contains('item')) {
                // 这里写你的自定义操作，示例为加背景色
                targetEl.style.backgroundColor = '#e8f4ff';
                break;
            }
            targetEl = targetEl.parentElement;
        }
   }
});

现代浏览器简化写法

如果不需要兼容IE11及更早版本，可以用Element.closest()直接简化判断：

$scope.addColor = function($event) {
    const targetItem = $event.target.closest('.item');
    if (targetItem) {
        // 执行自定义操作
        targetItem.style.backgroundColor = '#e8f4ff';
    }
}

补充说明：如果你的列表项数量没有达到几千上万的量级，更符合AngularJS语法习惯的写法是直接在li上绑定点击事件<li ng-click="addColor(x, $event)"，不需要自行处理事件冒泡逻辑，也不会有明显性能损耗。

内容的提问来源于stack exchange，提问作者user9087451