让JavaScript注意到鼠标悬停的目标发生了变化

Getting JavaScript to notice the target of the mouseover has changed

本文关键字：目标 发生了 变化 悬停 JavaScript 注意到 鼠标      更新时间：2023-09-26

在javascript的Call php函数中改编的代码中，我想在鼠标悬停在链接上时进行Ajax调用来运行php脚本，传递一个cookie，以便php脚本可以使用标识符在MySQL中查找内容。我第一次运行页面时，它正在工作。然而，在那之后，无论我把鼠标放在哪个链接上，它都认为事件的目标是第一个链接。

<ul>
 <li><a href="mypage.html?eventID=1" class="1">Event 1</a></li>
 <li><a href="mypage.html?eventID=2" class="2">Event 2</a></li>
 <li><a href="mypage.html?eventID=3" class="3">Event 3</a></li>
</ul>
<div id="modalMask">
    <div id="modalContent">
        Loading...
    </div>
</div>
<script src="ajaxRequest.js" type="text/javascript"></script>
<span id="output"></span>

使用链接的函数在这里:

function getOutput() 
{
  if (typeof e == 'undefined') e = window.event //we always do this in event handler, to make IE work
  var target = e.target || e.srcElement; //Another IE hack, so we can get the element the event relates to
  var ID = target.className;
  document.getElementById('output').innerHTML = ID; 
  var ajax = getRequest();
  ajax.onreadystatechange = function(){
      if(ajax.readyState == 4){
        document.getElementById('modalContent').innerHTML = 
             ajax.responseText + '<br><input type="button" onclick = "closeModalPopupWindow()" id="closeModal" value="Close">';
      }
  }
  ajax.open("GET", "do_query.php?eventID="+ID, true);
  ajax.send(null);
}

在jsFiddle上演示如下:http://jsfiddle.net/briggs_w/BWbuX/1/。Ajax调用被注释掉了，但是我放入了一个代码片段

  var ID = target.className;  
  document.getElementById('output').innerHTML = ID;

以便我可以看到链接的className。控制台调试器进行验证:它总是在页面加载后鼠标首先移到的链接。

看来主要问题出在你的css上。当触发鼠标悬停事件时，将显示modalMask元素。然而，问题是你把它放在其他所有内容的顶部:

position: absolute;
...
width: 100%;
height: 100%;
...
z-index: 1000;

这意味着你有一个不可见的层阻止访问链接，这就是为什么在第一个事件之后没有反应。

在排除故障时，我为您清理了以下代码:http://jsfiddle.net/Z4ZGZ/18/

"关闭"按钮不工作在小提琴，但它为我工作在本地，当我在body元素的底部包含脚本文件

相关文章：