可变范围和事件侦听器回调

Question

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

    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 回调中定义了 startX 和 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)
})
  }

Answer 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 来测试这个问题，如果问题再次出现，这几乎可以证明这个假设。

可变范围和事件侦听器回调

Variable scope and event listeners callback

javascript

event-listener

javascript-scope