应该在 Scala.js 中使用 `target` 而不是 `srcElement`答案

【问题标题】：Should be using `target` rather than `srcElement` in Scala.js应该在 Scala.js 中使用 `target` 而不是 `srcElement`
【发布时间】：2015-06-15 14:38:51
【问题描述】：

我有一些 Scala.js 代码，当目标浏览器是 Chrome 时可以正常工作，但当它是 Firefox 时就不行。有人告诉我，我不应该使用srcElement，而是使用target。但是我不知道如何访问target。

private def TD(locId: Location, personId: Person): HTMLTableCellElement = {
  val res = td(style := myPeopleTable_td).render
  res.onclick = { (e: dom.Event) => c.clickTD(e.srcElement)}
  res.id = Id(locId, personId).toString
  cells += (Id(locId, personId) -> res)
  res
}
def clickTD(element: Element): Unit = {
  val idOption = Id.parse(element.id)
  idOption.foreach(id => {
    locIdx = Location.indexOf(id.locId)
    personIdx = Person.indexOf(id.personId)
    localSync()
    v.personValueBox.focus()
  })
}

作为解释，c 是控制器，v 是视图。第一种方法在 View 中，第二种方法在 Controller 中。第一种方法是在 HTML 表格中设置一个单元格，包括当用户单击该单元格时发生的情况。在clickTD() 中，代码需要知道点击了什么——它需要以某种方式获取预先设置的 HTML 元素的“id”，以便可以查找模型对象。

如果我尝试用e.target 替换e.srcElement，结果如下：

[info] Compiling 1 Scala source to C:\dev\v2\atmosphere\js\target\scala2.11\classes...
[error] C:\dev\v2\atmosphere\js\src\main\scala\simple\View.scala:145: type mismatch;
[error]  found   : org.scalajs.dom.raw.EventTarget
[error]  required: org.scalajs.dom.Element
[error]     (which expands to)  org.scalajs.dom.raw.Element
[error]     res.onclick = { (e: dom.Event) => c.clickTD(e.target)}
[error]                                                   ^
[error] one error found
[error] (atmosphereJS/compile:compile) Compilation failed
[error] Total time: 1 s, completed 15-Jun-2015 02:14:41

感谢@ochrons，您建议使用res 而不是e.target 有效。不幸的是，对于其他控件，我遇到了“实例化顺序”问题。在下面，我试图将注释掉的行移到它可以看到res：

private def button_TD_Tog(idT: Row): HTMLTableCellElement = {
  val idsStr: String = idT.toString
  val buttonWidget = button(
    style := myToggleButton, 
    name := "button", 
    id := idsStr
    //onclick := { (e: dom.Event) => c.clickToggleButton(e.srcElement)}
  )
  val res = td(style := myToggleButtonCol, buttonWidget).render
  buttonWidget.onclick = { (e: dom.Event) => c.clickToggleButton(res)}
  res.id = idsStr
  buttonTDs += (idT -> res)
  res
}

我（我想我）在分配给 onclick 之前需要同时存在 res 和 buttonWidget，但编译器无法识别 onclick。我发现自己在这里寻找一些 API 文档来帮助我。我怀疑它是否存在（我发现 Scala.js 文档非常出色，但并不全面）。也许我应该看看 DOM 本身...

现在来看一个似乎适用于所有情况的简单通用解决方案的示例，根据您对强制类型的建议：

c.clickPushButton(e.target.asInstanceOf[dom.Element])}

【问题讨论】：

我认为这与stackoverflow.com/questions/30819811/…的问题相同
在res.onclick = 行上简单地将e.srcElement 替换为e.target 有什么问题？
@ochrons 该链接相关，但我需要找出点击来自哪个控件，因此我需要使用事件本身。 Julie 的解决方案是放弃使用该活动。

标签： scala.js

【解决方案1】：

如果你只需要知道你的td元素被点击了，那么你可以直接在闭包中使用c.clickTD(res)。但是如果td 中有可以点击的元素，那么您可以使用事件的target，只需将其转换为Element。在这种情况下，您的内部元素必须将点击事件冒泡到 td 元素。

DOM 不是完全类型安全的，所以有时您只需要“知道”您正在处理的内容。文档通常假定使用 JavaScript，因此它们并不真正关心类型安全之类的事情。

【讨论】：