Question

当用户将鼠标悬停在a-tag上时，我有一个应该执行showPeopleDetails函数的java服务器页面。 showPeopleDetails是一个单独的js文件中的javascript函数，由框架导入。 showPeopleDetails应该在a-tag上显示一个Balloon弹出窗口。不知何故，该功能仅针对第一个标签执行，而不是针对其他标签执行！这是HTML代码段：

| <a href="javascript:void(0);" class="PeopleLink LinkColorBlackDark" onmouseover=    "showPeopleDetails('<%=userUnique %>', event.clientX, event.clientY)" onmouseout="hidePeopleDetailsTimed()"></a>

这是我的javascript showPeopleDetails函数：

function showPeopleDetailsNow(UserId, x, y){
   var vpd = document.getElementById("PeopleDetails");
   if ( vpd != null ) {
       getMousePosition();
       vpd.style.top= x +10 + $(document).scrollTop(); //mouseX and mouseY are defined globally
       vpd.style.left= y +10;
       vpd.style.display="block";
   }
}

我测试过的showPeopleDetails函数没有任何问题，它正在网站的其他部分工作。但是当我添加event.clientX和event.clientY时，弹出窗口只显示一次。我只需要为Internet Explorer 8开发，因此浏览器兼容性不是问题。非常感谢帮助！

Answer 1

不要在函数调用中传递event.clientX和event.clientY，而是试试这个

<a href="javascript:void(0);" class="PeopleLink LinkColorBlackDark" onmouseover=    "showPeopleDetails('<%=userUnique %>', event)" onmouseout="hidePeopleDetailsTimed()"></a>

function showPeopleDetailsNow(UserId, event){
  event = event || window.event;
  var x = event.clientX, y = event.clientY;

   var vpd = document.getElementById("PeopleDetails");
   if ( vpd != null ) {
       getMousePosition();
       vpd.style.top= x +10 + $(document).scrollTop(); //mouseX and mouseY are defined globally
       vpd.style.left= y +10;
       vpd.style.display="block";
   }
}

使用鼠标悬停事件mousecoordinates作为函数输入

1 个答案: