Angular2 - 当事件发射器不是事件目标时该怎么办？答案

【问题标题】：Angular2 - What to do when event emitter is not the event target?Angular2 - 当事件发射器不是事件目标时该怎么办？
【发布时间】：2016-06-09 10:32:51
【问题描述】：

我想在鼠标悬停事件中获取表格的行元素。问题是事件目标是光标下的 td 元素而不是行元素本身。到目前为止，这与角度无关。这是一个 DOM 的事情。这是我的组件：

@Component({
 //....
 template: `
  <tr *ngFor="#row of rows;" (mouseover)="onRowHover($event)">
   <td *ngFor="#cell of row.cells">{{cell.value}}</td>
  </tr>`
 })
 export class Table {
  private onRowHover(event) {
   console.log("hover", event.target); //will print "hover <td>"
  }
 }

为了解决这个问题，我通常使用'this'来获取行，这将是行元素：

<tr onmouseover="console.log("hover", this)"> <!-- Will print "hover <row>" -->

所以问题是：如何访问 Angular2 中的“this”或行元素？有没有类似的东西：

<tr ... (mouseover)="onRowHover($event, $this)" >

我现在的解决方法是获取 event.target 的父级，它是适当的 tr 元素。

【问题讨论】：

标签： angular events html-table row

【解决方案1】：

怎么样

 <tr #tr *ngFor="#row of rows;" (mouseover)="onRowHover(tr)"></tr>

【讨论】：

这给了我行数据上下文但不是 tr DOM 元素
然后使用 $event.target
请阅读问题。问题是，事件目标不是行而是 td 元素
抱歉，我认为我们有 2 个选项：1) 2) 与 $event.target.parentNode
是的，做到了。第二个选项是我的解决方法。非常感谢。您能否编辑您的答案以便我接受？

【解决方案2】：

console.log(event.path[0]);

返回鼠标在最里面的元素

【讨论】：

event.path 未定义
我在 plunker 中尝试过，但我放弃了它，因为它太简单了。
不知道你用的是哪个浏览器。但这不适用于 Firefox。不过，在 chrome 上试了一下，效果很好。
有趣。我没有尝试过使用 Firefox，但谷歌搜索并看到一个很久以前修复的旧错误，并认为它也可以在那里工作。在这种情况下，@kit 的答案可能是更好的选择。
event.target 在 Firefox 和 Chrome 上为我返回 td。