Angular ng-click $event передает дочерний элемент в качестве цели

Для каждого элемента 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()
}

Его цель:

Пользователь нажимает на ячейку таблицы
Ячейка меняет "режим редактирования"
Дайте фокус элементу ввода, расположенному внутри td.

Сейчас это работает до тех пор, пока пользователь нажимает внутри элемента td, но не на элемент span:

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

Однако, если пользователь нажимает на элемент span внутри td:

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 parent

Ответ 1

Изменение:

angular.element(event.target)

в

angular.element(event.currentTarget)

исправлена моя проблема.

Мне кажется, что event.currentTarget предпочитает event.target в большинстве случаев использования случаев.

Ответ 2

event.target.closest('td') не будет работать, потому что event.target является элементом DOM и не имеет метода closest. Вам нужно создать объект jQuery для использования этого метода.

Попробуйте найти ближайший td следующим образом:

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