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事件的回调函数每次执行时都应该重置变量的范围吗？

我根据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来进行测试，如果问题再次出现，则可以肯定这个假设。

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

1 个答案: