AngularJS中点击行内复选框如何避免触发父行ng-click事件

这个场景我碰到过好多次，不用bind方法的话，有两种简单有效的方式可以解决：

方法一：在复选框的点击事件中阻止事件冒泡 #

直接给复选框添加ng-click指令，调用$event.stopPropagation()来阻止事件向上冒泡到父表格行。这样点击复选框时，只会触发复选框自身的逻辑，不会触发行的ng-click。

示例代码：

<tr ng-click="openDetailDialog(item)">
  <td>
    <!-- 直接在ng-click里阻止冒泡 -->
    <input type="checkbox" ng-click="$event.stopPropagation()" ng-model="item.selected">
  </td>
  <td>{{item.name}}</td>
  <td>{{item.description}}</td>
</tr>

如果你的复选框还有其他点击逻辑，也可以把阻止冒泡和自定义逻辑放在控制器函数里：

$scope.handleCheckbox = function(item, $event) {
  $event.stopPropagation();
  // 这里添加复选框的其他处理逻辑，比如批量选中状态更新
};

模板对应改成：

<input type="checkbox" ng-click="handleCheckbox(item, $event)" ng-model="item.selected">

方法二：在父行的点击事件中过滤来源 #

另一种思路是在父行的ng-click回调里，判断点击事件的源元素是不是复选框（或者复选框的子元素），如果是就不执行打开对话框的逻辑。

首先修改模板，把$event传递给父行的点击函数：

<tr ng-click="openDetailDialog(item, $event)">
  <td><input type="checkbox" ng-model="item.selected"></td>
  <td>{{item.name}}</td>
  <td>{{item.description}}</td>
</tr>

然后在控制器里处理这个函数：

$scope.openDetailDialog = function(item, $event) {
  // 检查点击的元素是否是复选框，或者属于复选框的容器
  const target = $event.target;
  if (target.tagName === 'INPUT' && target.type === 'checkbox') {
    return; // 是复选框的话直接返回，不执行对话框逻辑
  }
  // 这里写打开详情对话框的逻辑
  console.log('打开详情:', item);
};

这两种方法都不需要用到bind，完全基于AngularJS的原生指令和事件处理就能解决问题，根据你的代码习惯选一种就行~

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