javascript 无法访问事件的私有字段或方法错误

Question

点击时出现以下错误：

Uncaught TypeError: can't access private field or method: object is not the right class
    #clickEventHandler index.js:67
    enable index.js:45

我的 IDE 中没有出现任何错误，而且我不明白可能出了什么问题。

相关代码：

交互管理器

class InteractionsManager {
    #putHandler
    #eventListener

    constructor(putCallback) {
        this.#putHandler = new PutHandler(putCallback)
        this.#eventListener = null
    }

    /**
     * starts listening to "click" event
     */
    enable() {
line 45:        this.#eventListener = document.body.addEventListener("click", this.#clickEventHandler)
    }

    /**
     * 
     * @param {MouseEvent} e 
     */
    #clickEventHandler(e) {
        const mousePos = getMousePos(e);

line 67:        this.#putHandler.putTHandler(mousePos)
    }
}

放置处理程序

class PutHandler {
    putTHandler(mousePos) {
        
    }
}

知道可能出了什么问题吗？

Answer 1

编辑您的

enable

函数，如下所示：

enable() {
       this.#eventListener = document.body.addEventListener("click", this.#clickEventHandler.bind(this))
    }

当您直接传递像

this.#clickEventHandler

这样的方法引用时，事件侦听器不知道它所属的类实例，导致

#clickEventHandler

内部的this指向事件目标（在本例中为document.body）。通过显式绑定 this （使用 .bind()），您可以确保在调用方法时 this 仍然引用

InteractionsManager

的实例。