title: How to prevent automatic onmouseover after onfocus?
body: <p>I have created an HTML table with three links in each of the rows. My goal is to highlight a row whenever the user (1) hovers over it or (2) enters a link by pressing <kbd>tab</kbd>. I would also like to make sure that only one row is highlighted at a time. Here is a simplified version of my HTML (<strong>show.htm</strong>):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/&gt;
      &lt;script type="text/javascript" src="show.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="show.css"/&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;h2&gt;Basic Information:&lt;/h2&gt;
    &lt;table&gt;
      &lt;tr class="data"&gt;
        &lt;td&gt;London:&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://example.com/london_001.htm"&gt;Part 1&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://example.com/london_002.htm"&gt;Part 2&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://example.com/london_003.htm"&gt;Part 3&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="data"&gt;
        &lt;td&gt;New York:&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://example.com/newyork_001.htm"&gt;Part 1&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://example.com/newyork_002.htm"&gt;Part 2&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://example.com/newyork_003.htm"&gt;Part 3&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="data"&gt;
        &lt;td&gt;Tokyo:&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://example.com/tokyo_001.htm"&gt;Part 1&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://example.com/tokyo_002.htm"&gt;Part 2&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://example.com/tokyo_003.htm"&gt;Part 3&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="data"&gt;
        &lt;td&gt;Rio de Janeiro:&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://example.com/riodejaneiro_001.htm"&gt;Part 1&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://example.com/riodejaneiro_002.htm"&gt;Part 2&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://example.com/riodejaneiro_003.htm"&gt;Part 3&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="data"&gt;
        &lt;td&gt;Melbourne:&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://example.com/melbourne_001.htm"&gt;Part 1&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://example.com/melbourne_002.htm"&gt;Part 2&lt;/a&gt;&lt;/td&gt;
        &lt;td&gt;&lt;a href="http://example.com/melbourne_003.htm"&gt;Part 3&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the Javascript (<strong>show.js</strong>):</p>
  
  <pre><code>window.onload = function(){
    var rows = document.getElementsByClassName('data');
    var links = document.getElementsByTagName('a');
    var len = rows.length;
    var old_index = -1;
    var set_color = function(index, color){
      return function(){
        if(index !== old_index){
          if(old_index !== -1){
            rows[old_index].style.backgroundColor = null;
          }
          rows[index].style.backgroundColor = color;
          old_index = index;
        }
      }
    }
    var i, j;
    for(i = 0; i &lt; len; i++){
      rows[i].onmouseover = set_color(i, '#FFFFBB');
      rows[i].onmouseout = set_color(i, null);
      for(j = 0; j &lt; 3; j++){
        links[i*3+j].onfocus = set_color(i, '#FFFFBB');
        links[i*3+j].onblur = set_color(i, null);
      }
    }
  }
  </code></pre>
  
  <p>And, finally, here is the CSS (<strong>show.css</strong>):</p>
  
  <pre><code>table{
    margin:auto;
    width:98%;
    border-collapse:collapse;
    border:none;
  }
  td{
    border-top:1px solid gray;
    border-bottom:1px solid gray;
    border-left:none;
    border-right:none;
    vertical-align:center;
    font-weight:bold;
  }
  .data{
    background-color:rgba(120, 120, 240, 0.4);
    font-family:Tahoma;
    font-size:16px;
  }
  .data&gt;td{
      padding:6px 16px;
  }
  </code></pre>
  
  <p>Whenever the page is loaded and I press <kbd>tab</kbd>, the first link receives focus but the row on which the mouse pointer rests (not necessarily the first row) gets highlighted. It seems that the <code>onmouseover</code> event fires immediately after the <code>onfocus</code>, even though no mouse movement is actually made. How to tackle this issue (without using any external library like JQuery)? Any help will be appreciated.</p>
  
  <hr/>
  
  <p><strong>Update:</strong></p>
  
  <p>I have modified my Javascript code in order to detect actual mouse movement (borrowing the idea from Nick Bull’s answer). But the problem has remained. I need further help.</p>
  
  <pre><code>window.onload = function(){
    var rows = document.getElementsByClassName('data');
    var links = document.getElementsByTagName('a');
    var len = rows.length;
    var old_index = -1;
    var old_coords = {X:event.screenX, Y:event.screenY};
    var set_color = function(index, color, keyboard_event){
      return function(){
        if(keyboard_event || event.screenX !== old_coords.X || event.screenY !== old_coords.Y){
          if(index !== old_index){
            if(old_index !== -1){
              rows[old_index].style.backgroundColor = null;
            }
            rows[index].style.backgroundColor = color;
            old_index = index;
            if(!keyboard_event){
              old_coords.X = event.screenX;
              old_coords.Y = event.screenY;
            }
          }
        }
      }
    }
    var i, j;
    for(i = 0; i &lt; len; i++){
      rows[i].onmouseover = set_color(i, '#FFFFBB', false);
      rows[i].onmouseout = set_color(i, null, false);
      for(j = 0; j &lt; 3; j++){
        links[i*3+j].onfocus = set_color(i, '#FFFFBB', true);
        links[i*3+j].onblur = set_color(i, null, true);
      }
    }
  }
  </code></pre>
  
  <hr/>
  
  <p>The document loads:</p>
  
  <p><img src="https://i.imgur.com/RRzWGXQ.jpg" alt="screenshot"/></p>
  
  <p>The first <kbd>tab</kbd> is pressed:</p>
  
  <p><img src="https://imgur.com/FWgzP44.jpg" alt="screenshot"/></p>