添加EventListener时取消捕获ReferenceError

ymdaylpp  于 2022-10-22  发布在  Java
关注(0)|答案(1)|浏览(164)

我正在尝试独立实现在类中拖动块的能力。但是,尝试覆盖eventListener时出现问题。。。

  1. class Form {
  2. constructor() {
  3. //pass
  4. }
  5. DOMGenerator(elemClass) {
  6. const element = document.createElement('div');
  7. element.classList.add(elemClass);
  8. return element;
  9. }
  10. Draw() {
  11. const form = this.DOMGenerator('window'),
  12. label = this.DOMGenerator('window_label'),
  13. controls = this.DOMGenerator('window_controls'),
  14. close = this.DOMGenerator('close'),
  15. minimize = this.DOMGenerator('minimize'),
  16. maximize = this.DOMGenerator('maximize')
  17. label.addEventListener('mousedown', event => {
  18. const offsetX = event.offsetX;
  19. const offsetY = event.offsetY;
  20. document.addEventListener('mousemove', listener = event => {
  21. let pageX = event.pageX;
  22. let pageY = event.pageY;
  23. form.style.left = `${pageX - offsetX}px`;
  24. form.style.top = `${pageY - offsetY}px`;
  25. })
  26. document.addEventListener('mouseup', () => {
  27. document.removeEventListener('mousemove', listener, false);
  28. })
  29. })
  30. controls.append(close, minimize, maximize);
  31. label.append(controls);
  32. form.append(label);
  33. document.body.append(form);
  34. }
  35. }
  36. new Form().Draw();

当执行代码并单击标签元素时,我得到

  1. Uncaught ReferenceError: listener is not defined
  2. at HTMLDocument.<anonymous> (main.js:31:63)
  3. (anonymous) @ main.js:31

但是,如果我在现有DOM元素上执行类外的代码,那么一切都会正常工作……所以我尝试像这样更改函数声明

  1. document.addEventListener('mousemove', function listener(event) {
  2. let pageX = event.pageX;
  3. let pageY = event.pageY;
  4. form.style.left = `${pageX - offsetX}px`;
  5. form.style.top = `${pageY - offsetY}px`;
  6. })

它抓取窗口并将其粘贴到光标上,但无法执行removeEventListener,错误相同

  1. Uncaught ReferenceError: listener is not defined
  2. at HTMLDocument.<anonymous> (main.js:31:63)
eaf3rand

eaf3rand1#

您还没有在任何地方定义名为listener的函数。
您可以在外部定义listener函数。

  1. const listener = (event) => {
  2. // some code
  3. }
  4. element.addEventListener('mousemove', listener);
  5. element.removeEventListener('mousemove', listener);

这里只定义了一个命名函数表达式。不能使用侦听器的名称从外部访问。

  1. document.addEventListener('mousemove', function listener(event) {
  2. let pageX = event.pageX;
  3. let pageY = event.pageY;
  4. form.style.left = `${pageX - offsetX}px`;
  5. form.style.top = `${pageY - offsetY}px`;
  6. })

让我们尝试访问它。我们将看到的结果是undefined

  1. document.addEventListener('mousemove', function listener(event) {
  2. ...
  3. })
  4. console.log(typeof listener); -> undefined

您可以为解决方案执行如下操作。

  1. Draw() {
  2. const form = ...
  3. let pageX;
  4. let pageY;
  5. let offsetX;
  6. let offsetY;
  7. const listener = (event) => {
  8. pageX = event.pageX;
  9. pageY = event.pageY;
  10. form.style.left = `${pageX - offsetX}px`;
  11. form.style.top = `${pageY - offsetY}px`;
  12. }
  13. label.addEventListener('mousedown', event => {
  14. offsetX = event.offsetX;
  15. offsetY = event.offsetY;
  16. document.addEventListener('mousemove', listener)
  17. document.addEventListener('mouseup', () => {
  18. document.removeEventListener('mousemove', listener, false);
  19. })
  20. })
  21. ...
  22. }
展开查看全部

相关问题