事件标识符 - ClientX和ClientY

Question

我想更好地理解事件属性clientX和clientY的用法。

我需要找到鼠标指针在特定div上移动时的顶部和左侧偏移量。 projectImage（x）函数附加到div的onmouseover。 x是函数参数，基于该函数参数可以确定特定图像的URL。

现在。 clientX是鼠标悬停事件发生时指针的左偏移量，因此我可以在event.clientX中为事件输入什么内容

下面的函数不起作用（报告为未由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";

}

Answer 1

您所要做的就是将事件对象传递给函数（并且可能稍微重构一下参数）：

<div onmouseover="projectImage(event || window.event, 'Joey', 123);"> Joey </div>

event || window.event 需要event || 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";
}

使用有意义的变量名有助于更容易理解代码。

Answer 2

正如@FelixKling所提到的，你应该传递事件对象。

我建议切换到addEventListener / attachEvent而不是使用内联事件，我在这里给你举个例子。

var x = document.getElementById('x');
var y = document.getElementById('y');
document.getElementById('test').addEventListener('mousemove', function(e){
    x.innerHTML = 'X: ' + e.clientX;
    y.innerHTML = 'Y: ' + e.clientY;
});​

但是，如果你已经设置了内联事件，你可以通过<div onmouseover="projectImage(event,'Joey|123');"> Joey </div>