Getting JavaScript to notice the target of the mouseover has changed

Question

In code adapted from Call php function from javascript , I want to make an Ajax call to run a PHP script whenever I mouseover a link, passing in a cookie so that the PHP script can use an identifier to look things up in MySQL. It is working, the first time I run the page. However, after that, no matter what link I put the mouse over, it thinks that the target of the event is that very first link.

<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>

The function that uses the links is here:

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

This is demonstrated on jsFiddle here: http://jsfiddle.net/briggs_w/BWbuX/1/ . The Ajax call is commented out, but I put in a snippet

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

so that I can see the className of the link. The console debugger verifies: it's always whichever link I mouseover'ed first after page load.

score 0 · Accepted Answer · answered Apr 09 '13 at 23:01

Well, it seems like the main issue was with your css. When a mouseover event was triggered, the modalMask element was shown. The problem however was that you placed it on top of everything else with:

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

This means that you had an invisible layer blocking access to the links, and that's why there was no reaction after the first event.

While troubleshooting, i cleaned up the code for you at: http://jsfiddle.net/Z4ZGZ/18/

The 'close' button doesn't work in the fiddle, but it worked for me locally when i included the script file at the bottom of the body element.

Getting JavaScript to notice the target of the mouseover has changed

1 Answers1