Angular ng-click $ event将子元素作为目标传递

Question

对于表格中的每个td元素,我都附加了ng-click.这是每个表格单元格的(简化)html:

<td ng-click="cellClicked($event)">
    <span ng-if="!cellEdit">{{event.eventName}}</span>
    <input type="text" ng-if="cellEdit" ng-model="event.eventName">
</td>

和我的(简化)ng-click功能:

scope.cellClicked = function (event) {
  rowScope.cellEdit = true
  angular.element(event.target).find('input').focus()
}

我的目标是:

1. 用户单击表格单元格
2. 单元格更改为"编辑模式"
3. 将焦点放在位于td内的输入元素上.

现在,只要用户在td元素内部而不是在span元素上单击,这是有效的:

console.log(angular.element(event.target)) #--> [td...] (as desired)

但是,如果用户单击td中的span元素:

console.log(angular.element(event.target)) #--> [span...]

在这个用例中,分配焦点不起作用.我希望访问span的父元素,例如:

angular.element(event.target.closest('td'))

要么

angular.element(event.target.parentNode)

但是当元素通过$ event传递并且访问时没有父上下文.

我怎么能:

• 阻止单击span元素触发td的ng-click
• 点击span元素后,通过它的html父级

Answer 1

更改:

angular.element(event.target)

至:

angular.element(event.currentTarget)

解决了我的问题.

在我看来,在大多数用例中,event.currentTarget比event.target更受欢迎.