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

首先，它应该是＆＃34; mousemove＆＃34;不是＆＃34; onmousemove＆＃34;

其次，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

Answer 2

是的，非常感谢。我把这个方法称为：

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

并在方法中引用canvas2，例如＆＃39; this＆＃39;。事件

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

非常感谢你的帮助。

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

2 个答案: