Angular ng-click $ event将子元素作为目标 [英] Angular ng-click $event passes child element as target

问题描述

对于表格中的每个 td 元素，我都附带了一个ng-click。以下是每个表格单元格的（简化）html：

 < td ng-click =cellClicked（$ event） > 
< span ng-if =！cellEdit> {{event.eventName}}< / span> 
< input type =textng-if =cellEditng-model =event.eventName> 
< / td> 
  

以及我的（简化的）ng-click函数：

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

我的目标是：

1. 用户点击表格单元格
   
2. 单元格更改为编辑模式


3. 将焦点放在位于 td 内的 input 元素。

只要用户点击td元素中的而不是span元素：

  console.log（angular.element（event.target））＃ - > [td ...]（根据需要）
  

然而，如果用户点击td：

  console.log（angular.element（event.target））＃ - > [span ...] 
  

在此用例中，分配焦点不起作用。我希望能够像 span 那样访问父元素：

$ $ p $ angular.element（




$ b

  angular.element（event.target.parentNode）
  

但是，当一个元素通过$ event传递并且没有父上下文时，它就会出现。



我该怎么做：

• 防止点击 td 的ng-click
$ b $点击 span b
• 点击 span 元素传递它的html父元素

解决方案

更改：

  angular.element（event.target）
  

到：

  angular.element（event.currentTarget ）
  

解决了我的问题。

它在我看来，使用 event.currentTarget 在大多数使用情况下优先于 event.target 。

For each td element in a table I have an attached ng-click. Here is the (simplified) html for each table cell:

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

And my (simplified) ng-click function:

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

Its my goal to:

1. User clicks a table cell
2. Cell changes to "edit mode"
3. Give focus to the input element located inside the td.

Right now this is working as long as the user clicks inside the td element but not on the span element:

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

However if the user clicks on the span element within the td:

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

In this use case assigning focus does not work. I was hoping to access the parent element of the span doing something like:

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

or

angular.element(event.target.parentNode)

But it appears when an element gets passed through via $event and accessed there is no parent context.

How can I either:

• Prevent clicking the span element firing the td's ng-click
• On click of span element pass through it's html parent

解决方案

Changing:

angular.element(event.target)

to:

angular.element(event.currentTarget)

fixed my issue.

It seems to me using event.currentTarget is preferred to event.target in the majority of usage cases.

这篇关于Angular ng-click $ event将子元素作为目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！