我试图更好地理解事件属性 clientX 和 clientY 的用法。
当鼠标指针移动到特定的 div 上时,我需要找到鼠标指针的顶部和左侧偏移量。 projectImage(x) 函数附加到 div 的 onmouseover 上。 x 是一个函数参数,可以根据它确定特定图像的 URL。
现在。 clientX是mouseover事件发生时指针的左偏移量,那么event.clientX中的event可以输入什么
下面的函数不起作用(报告为未由 JS 控制台定义)我认为是因为前两行中的语法错误。
function projectImage(x)
{
// Should the 1st two lines (right hand side) be x.clientY and x.clientX,
// x is a function argument not event relevant to the pointer offset though
var toffset = x.clientY ; // help_me_here.clientY
var loffset = x.clientX ; // Event_Identifier_??.cleintX
var picdiv = document.getElementById("picdiv") ;
picdiv.style.position = "absolute" ;
picdiv.style.left = loffset + "px" ;
picdiv.style.top = toffset + "px" ;
picdiv.innerHTML = "<img src='" + "http://imageServer.com/" + x.split("|")[1] + "' width='30px' />" ;
picdiv.style.visibility = "visible";
}
最佳答案
您所要做的就是将事件对象传递给函数(并可能重构一下参数):
<div onmouseover="projectImage(event || window.event, 'Joey', 123);"> Joey </div>
事件 || window.event
是必需的,因为 IE 不会将事件对象作为参数传递给事件处理程序,因此必须通过 window
检索。
同时更改您的函数以能够访问这些参数:
function projectImage(event, name, id) {
var toffset = event.clientY;
var loffset = event.clientX;
var picdiv = document.getElementById("picdiv") ;
picdiv.style.position = "absolute" ;
picdiv.style.left = loffset + "px" ;
picdiv.style.top = toffset + "px" ;
picdiv.innerHTML = "<img src='http://imageServer.com/" + id + "' width='30px' />" ;
picdiv.style.visibility = "visible";
}
使用有意义的变量名有助于更轻松地理解代码。
关于javascript - 事件标识符 - ClientX 和 ClientY,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14057302/