ScalaJS removeEventListener 上的可拖动不起作用

Question

基于那个 js 演示：http://jsfiddle.net/wfbY8/737/

class Draggable(element: HTMLDivElement) {

  var offX: Double = 0
  var offY: Double = 0

  val divMove = (e:MouseEvent) => {
    //element.style.position = 'absolute';
    element.style.top = (e.clientY-offY) + "px"
    element.style.left = (e.clientX-offX) + "px"
  }

  val mouseDown = (e:MouseEvent) => {
    offY = e.clientY - element.offsetTop
    offX = e.clientX - element.offsetLeft
    window.addEventListener("mousemove", divMove, useCapture = true)
    println("added")
  }

  val mouseUp = (e:MouseEvent) => {
    window.removeEventListener("mousemove", divMove, useCapture = true)
     println("removed")
  }

  def addListeners(){
    element.addEventListener("mousedown", mouseDown, useCapture = false)
    window.addEventListener("mouseup", mouseUp, useCapture = false)

  }

  addListeners()

}

从客户端代码我使用它：

  val panelElem = document.getElementById(COMPONENT_ID).asInstanceOf[HTMLDivElement]
  if (draggable == null) {
    draggable = new Draggable(panelElem)
  }

我在日志中看到“已添加”和“已删除”。但是该元素对我来说仍然是可移动的（当我移动鼠标而不按下它时），就好像我没有从侦听器中删除 mousemove 事件（在 mouseUp 上）。

我想知道为什么..

Answer 1

发生这种情况是因为您有效地将 Scala 函数（lambda）分别转换为 add 和 remove 的 JS 函数。在 Scala.js 中，Scala 函数会根据需要隐式转换为 JS 函数。但是，每次转换都会产生不同的 JS 函数（它没有相同的 identity）。因此，您尝试删除的功能与您添加的功能不同相同，这当然没有效果。

您可以通过强制提前进行转换来解决此问题，这样您就可以添加和删除相同的功能。为此，只需将显式类型添加到您的函数 vals 作为 JS 函数：

  val divMove: js.Function1[MouseEvent, Unit] = (e:MouseEvent) => {
    ...
  }

这样，Scala 函数到 JS 函数的转换只发生一次，并且是给 add- 和 removeEventListener 的同一个 JS 函数。