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()
}

我的目标是：

用户点击表格单元格
单元格更改为＆＃34;编辑模式＆＃34;
将焦点放在 td 内的输入元素。

现在，只要用户点击td元素内的但不点击span元素，此功能就会正常工作：

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

但是，如果用户点击了td：

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

在此用例中，分配焦点不起作用。我希望访问 span 的父元素，例如：

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

或

angular.element(event.target.parentNode)

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

我怎么能：

阻止点击 span 元素，触发 td ＆n-cn-click
点击 span 元素后，通过它的html父

Answer 1

更改：

angular.element(event.target)

为：

angular.element(event.currentTarget)

解决了我的问题。

在我看来，在大多数使用案例中，使用event.currentTarget比event.target更受欢迎。

Answer 2

event.target.closest('td')无效，因为event.target是一个DOM元素，而且它没有方法closest。您需要创建一个jQuery对象才能使用此方法。

尝试找到最近的td：

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

Answer 3

在Angular 7.x中

myClickHandler($event) {
    this.selectedElement = <Element>$event.target.closest('.list-item');
}

html：

<div class="list-item" (click)="myClickHandler($event)">...</div>

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

3 个答案: