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

我一直在这个圈子里走来走去。现在我知道有些事我不明白，因为我已经回应了一段时间，它从来没有真正正常工作。命名方法和鼠标事件处理程序

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

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

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

来源

2014-05-16 A fish

您正在调用'updateMouse'，而不是分配处理程序。你的'updateMouse'定义了一个'c'参数，但是试图使用'e'就好像它已经被赋予了'event'对象。您应该让参数预测'event'对象，并使用'this'引用'canvas2'。并且摆脱'if（！e）var e = window.event;' –

首先，它应该是“鼠标移动”不“的OnMouseMove”

其次，鼠标移动事件发生的事件作为一个参数，这样就实现你想要什么，你可以使用：

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

来源

2014-05-16 18:52:17

是的，非常感谢。我打电话的方式是这样的：

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

非常感谢您的帮助。

来源

2014-05-17 09:19:48

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

回答

相关问题