代码之家 › 专栏 › 技术社区 › ses

ScalaJS removeEventListener上的draggable不工作

scala.js scala

1

ses · 技术社区 · 10 年前

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上)。

我想知道为什么。。

1 回复 | 直到 10 年前

1

3

sjrd 10 年前

这是因为您正在将Scala函数(lambda)有效地分别转换为JS函数 add 和 remove 。在Scala中。js,Scala函数是隐式的转换 JS功能。然而,每次转换都会产生不同的JS函数(它没有相同的身份 ). 因此,您要删除的函数不是 相同的 就像你添加的那个,当然没有效果。

您可以通过强制尽早进行转换来解决这个问题,以便添加和删除相同的函数。为此,只需将显式类型添加到函数中 val s作为JS函数:

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

这样,从Scala函数到JS函数的转换只发生一次,并且它与给定的JS函数相同 添加 -和 removeEventListener .