Javascript 命名方法和鼠标事件处理程序

我一直在绕圈子。现在我知道有些事情我不明白，因为我让它响应了一段时间，它从来没有真正正常工作过

这些条件位于更新动画的循环中。我只想在选项等于某个值时侦听鼠标运动事件，在其他情况下，我删除事件侦听器

处理鼠标运动事件的方法是updateMouse，并根据变量opt的状态正确调用它

if (opt == 7) {
    canvas2.addEventListener("onmousemove", updateMouse(canvas2), false);
} else {
    canvas2.removeEventListener("onmousemove", updateMouse, false);
}

运行脚本时遇到的问题是：“无法读取未定义的属性clientX”

function updateMouse(c) {
    if (!e) var e = window.event;
    var rect = c.getBoundingClientRect();
    m_pos = {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    };
    console.log("salida: " + m_pos.x + " " + m_pos.y);
}

这不是用命名方法处理鼠标事件的正确方法吗？

首先，它应该是“mousemove”而不是“onmousemove”

其次，mousemove事件将该事件作为参数，因此，要实现所需的功能，可以使用：

function updateMouse(c) {
    return function(e) {
        var e = e | window.event;  //some cases the event doesn't get passed to the function
        var rect = c.getBoundingClientRect();
        m_pos = {
            x: event.clientX - rect.left,
            y: event.clientY - rect.top
        };
        console.log("salida: " + m_pos.x + " " + m_pos.y);
    };
}

长话短说，它返回的函数具有正确的参数（接受事件），但仍然可以访问传入的画布对象

---

另外，您需要跟踪调用

updateMouse（canvas2）

的结果，并将其从画布中删除，而不是

updateMouse

是的，非常感谢。我这样调用该方法：

if (opc == 7) {
    canvas2.addEventListener("mousemove", actualizaMouse, false);
} else {
    canvas2.removeEventListener("mousemove", actualizaMouse, false);
}

以及类似“this”的方法中的参考canvas2。事件

function actualizaMouse() {
    var e = e | window.event;
    var rect = this.getBoundingClientRect();
    m_pos = {
        x: event.clientX - rect.left,
        y: event.clientY - rect.top
    };
    console.log("salida: " + m_pos.x + " " + m_pos.y);
}

---

非常感谢您的帮助。

您正在调用

updateMouse

，而不是分配处理程序。您的

updateMouse

定义了一个

c

参数，但尝试使用

e

，就好像它将被赋予

事件

对象一样。您应该让参数预测

事件

对象，并使用

this

引用

canvas2

。如果（！e）var e=window.event，则去掉