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

Question

我一直在绕这个圈。 现在我知道有些事情我不了解，因为我让它响应了一段时间，但它从未真正正常工作。

这些条件位于更新动画的循环内。 我只想在选项等于某个值时侦听鼠标移动事件，否则，我将删除事件侦听器。

处理鼠标移动事件的方法是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);
}

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

Answer 1

首先，应该是“ 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);
    };
}

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

另外，您将需要跟踪对updateMouse(canvas2)的调用结果，并将其从画布中删除，而不是从updateMouse

Answer 2

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

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

非常感谢你的帮助。