Переменная область действия и обратный вызов слушателей событий

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)
      })
    })

Ранее я определил свои startX и startY внутри обратного вызова mouseup следующим образом:

    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 каждый раз, когда событие запускалось после первого раза. Зачем? Это не имеет смысла для меня, так как в области действия let должна быть переменная, сбрасываемая каждый раз, когда выполняется функция обратного вызова для события mouseup?

Я обновил свой код в соответствии с комментариями Таплара, и теперь область работает так, как я ожидал

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, который не является одним из ранее примененных методов (и вовсе не методом), я предполагаю, что логика либо проверяет, что параметр не является функцией и ничего не делает, или пытается удалить его, видит, что он не соответствует ни одному из прикрепленных методов, и просто ничего не делает. Это, однако, предположение.

Однако, учитывая, что ваша модификация логики для исправления передачи второго аргумента разрешила вашу проблему, это склоняется к тому, чтобы быть этой проблемой, и ваша наблюдаемая проблема, скорее всего, была вызвана тем, что методы слушателя не были удалены, а мусор наблюдался повторяющимися привязками.

Вы можете проверить это, изменив параметр обратно на окно, и если проблема появится снова, это в значительной степени подтвердит это предположение.