添加EventListener时取消捕获ReferenceError

ymdaylpp 于 2022-10-22 发布在 Java

关注(0)|答案(1)|浏览(162)

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

class Form {
    constructor() {
        //pass
    }
    DOMGenerator(elemClass) {
        const element = document.createElement('div');
        element.classList.add(elemClass);
        return element;
    }
    Draw() {
        const form = this.DOMGenerator('window'),
            label = this.DOMGenerator('window_label'),
            controls = this.DOMGenerator('window_controls'),
            close = this.DOMGenerator('close'),
            minimize = this.DOMGenerator('minimize'),
            maximize = this.DOMGenerator('maximize')

            label.addEventListener('mousedown', event => {
                const offsetX = event.offsetX;
                const offsetY = event.offsetY;

                document.addEventListener('mousemove', listener = event => {
                    let pageX = event.pageX;
                    let pageY = event.pageY;

                    form.style.left = `${pageX - offsetX}px`;
                    form.style.top = `${pageY - offsetY}px`;
                })

                document.addEventListener('mouseup', () => {
                    document.removeEventListener('mousemove', listener, false);
                })
            })

            controls.append(close, minimize, maximize);
            label.append(controls);
            form.append(label);
            document.body.append(form);
    }
}

new Form().Draw();

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

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

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

document.addEventListener('mousemove', function listener(event) {
                    let pageX = event.pageX;
                    let pageY = event.pageY;

                    form.style.left = `${pageX - offsetX}px`;
                    form.style.top = `${pageY - offsetY}px`;
                })

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

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

JavaScript

来源：https://stackoverflow.com/questions/74158239/uncaught-referenceerror-when-adding-an-eventlistener

1条答案

按热度按时间

eaf3rand1#

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

const listener = (event) => {
   // some code
}

element.addEventListener('mousemove', listener);
element.removeEventListener('mousemove', listener);

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

document.addEventListener('mousemove', function listener(event) {
 let pageX = event.pageX;
 let pageY = event.pageY;

 form.style.left = `${pageX - offsetX}px`;
 form.style.top = `${pageY - offsetY}px`;
})

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

document.addEventListener('mousemove', function listener(event) {
      ...
})

console.log(typeof listener); -> undefined

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

Draw() {
      const form = ...

          let pageX;
          let pageY;
          let offsetX;
          let offsetY;

          const listener = (event) => {
                  pageX = event.pageX;
                  pageY = event.pageY;

                  form.style.left = `${pageX - offsetX}px`;
                  form.style.top = `${pageY - offsetY}px`;
          }

          label.addEventListener('mousedown', event => {
              offsetX = event.offsetX;
              offsetY = event.offsetY;

              document.addEventListener('mousemove', listener)

              document.addEventListener('mouseup', () => {
                  document.removeEventListener('mousemove', listener, false);
              })
          })

         ...
}

赞(0）回复(0）举报 2022-10-22

我来回答

添加EventListener时取消捕获ReferenceError

1条答案

相关问题

热门标签

最新问答