0

我有以下代码，现在可以使用。问题是为什么？

    let resizing = false
    let startX = 0
    let startY = 0
    window.addEventListener('mousedown', (e) => {
      resizing = true
      startX = e.clientX
      startY = e.clientY
      console.log('startX ' + startX)
      document.body.addEventListener('mouseup', (e) => {
        if (resizing) {
          let endX = e.screenX
          console.log('endX ' + endX)
          let endY = e.screenY
          this.resize(startX, endX, startY, endY, window)
        }
        resizing = false
        e.target.removeEventListener('mouseup', window)
      })
    })

以前我在 mouseup 回调中定义了我的startXand ，如下所示：startY

    let resizing = false
    window.addEventListener('mousedown', (e) => {
      resizing = true
      let startX = e.clientX
      let startY = e.clientY
      console.log('startX ' + startX)
      document.body.addEventListener('mouseup', (e) => {
        if (resizing) {
          let endX = e.screenX
          console.log('endX ' + endX)
          let endY = e.screenY
          this.resize(startX, endX, startY, endY, window)
        }
        resizing = false
        e.target.removeEventListener('mouseup', window)
      })
    })

但是每次在第一次触发事件后，我得到相同的 startX 和 startY 值。为什么？这对我来说没有意义，因为每次 mouseup 事件的回调函数完成时，let 的范围都应该重置变量？

我根据 Taplars 评论更新了我的代码，现在范围按我的预期工作

let window = this
window.addEventListener('mousedown', (e) => {
  let startX = e.clientX
  let startY = e.clientY
  console.log('startX ' + startX)
  var mouseUpHandler = function (e) {
    console.log('mouseup')
    let endX = e.screenX
    console.log('endX ' + endX)
    let endY = e.screenY
    window.resize(startX, endX, startY, endY, window)
    document.body.removeEventListener('mouseup', mouseUpHandler)
  }
  document.body.addEventListener('mouseup', mouseUpHandler)
})
  }

4

1 回答 1

1

你原来的逻辑有e.target.removeEventListener('mouseup', window)，哪里e.target解决document.body。所以它有效地执行：

document.body.removeEventListener('mouseup', window);

这里的一个问题是传递给该removeEventListener()方法的第二个参数应该是您之前附加的方法之一。参考。https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

鉴于您正在传递window，这不是您之前附加的方法之一（也根本不是方法），我的假设是逻辑要么测试参数不是函数并且不做任何事情，或者它试图删除它，发现它不匹配任何附加的方法，并且什么也不做。然而，这是一个假设。

但是，鉴于您对修复第二个参数传入的逻辑的修改解决了您的问题，这倾向于这是问题所在，您观察到的问题很可能是由于未删除侦听器方法并且重复绑定观察到垃圾.

您可以通过将参数更改回 window 来测试这一点，如果问题再次出现，这几乎可以断言这个假设。

于 2019-01-14T23:32:56.787 回答