如何防止onfocus後自動onmouseover？

我在每行中創建了一個包含三個鏈接的HTML表格。我的目標是在用戶（1）懸停在其上或（2）通過按選項卡輸入鏈接時突出顯示一行。我還想確保一次僅突出顯示一行。這裏是我的HTML的一個簡化版本（show.htm）：如何防止onfocus後自動onmouseover？

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
    <script type="text/javascript" src="show.js"></script> 
    <link rel="stylesheet" type="text/css" href="show.css"/> 
    </head> 
    <body> 
    <h2>Basic Information:</h2> 
    <table> 
    <tr class="data"> 
     <td>London:</td> 
     <td><a href="http://example.com/london_001.htm">Part 1</a></td> 
     <td><a href="http://example.com/london_002.htm">Part 2</a></td> 
     <td><a href="http://example.com/london_003.htm">Part 3</a></td> 
    </tr> 
    <tr class="data"> 
     <td>New York:</td> 
     <td><a href="http://example.com/newyork_001.htm">Part 1</a></td> 
     <td><a href="http://example.com/newyork_002.htm">Part 2</a></td> 
     <td><a href="http://example.com/newyork_003.htm">Part 3</a></td> 
    </tr> 
    <tr class="data"> 
     <td>Tokyo:</td> 
     <td><a href="http://example.com/tokyo_001.htm">Part 1</a></td> 
     <td><a href="http://example.com/tokyo_002.htm">Part 2</a></td> 
     <td><a href="http://example.com/tokyo_003.htm">Part 3</a></td> 
    </tr> 
    <tr class="data"> 
     <td>Rio de Janeiro:</td> 
     <td><a href="http://example.com/riodejaneiro_001.htm">Part 1</a></td> 
     <td><a href="http://example.com/riodejaneiro_002.htm">Part 2</a></td> 
     <td><a href="http://example.com/riodejaneiro_003.htm">Part 3</a></td> 
    </tr> 
    <tr class="data"> 
     <td>Melbourne:</td> 
     <td><a href="http://example.com/melbourne_001.htm">Part 1</a></td> 
     <td><a href="http://example.com/melbourne_002.htm">Part 2</a></td> 
     <td><a href="http://example.com/melbourne_003.htm">Part 3</a></td> 
    </tr> 
    </table> 
    </body> 
</html>

這裏是JavaScript（show.js）：

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 < len; i++){ 
    rows[i].onmouseover = set_color(i, '#FFFFBB'); 
    rows[i].onmouseout = set_color(i, null); 
    for(j = 0; j < 3; j++){ 
     links[i*3+j].onfocus = set_color(i, '#FFFFBB'); 
     links[i*3+j].onblur = set_color(i, null); 
    } 
    } 
}

最後，這裏是CSS （show.css）：

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>td{ 
    padding:6px 16px; 
}

每當加載頁面時，我按選項卡，第一個鏈接接收焦點，但鼠標指針所在行（不一定是第一行）被突出顯示。看起來onmouseover事件在onfocus之後立即觸發，即使實際上沒有鼠標移動。如何解決這個問題（不使用任何外部庫，如JQuery）？任何幫助將不勝感激。

更新：

我已經爲了檢測實際的鼠標移動（借用尼克公牛的答案的想法）修改了我的Javascript代碼。但問題依然存在。我需要進一步的幫助。

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 < len; i++){ 
    rows[i].onmouseover = set_color(i, '#FFFFBB', false); 
    rows[i].onmouseout = set_color(i, null, false); 
    for(j = 0; j < 3; j++){ 
     links[i*3+j].onfocus = set_color(i, '#FFFFBB', true); 
     links[i*3+j].onblur = set_color(i, null, true); 
    } 
    } 
}

文件加載：

screenshot

第一片被壓：

screenshot

來源

2016-08-07 Sharanya Dutta

這是我的最終殺死了惡魔（儘管如此，但仍然有效）：
（1）我創建了兩個不同的變量，用於最後一個懸停索引和最後一個重點索引
（2）我爲onmouseover,創建了四個不同的函數,onfocus和onblur
（3）我添加了一個超時以確保onmouseover不會在onfocus之後立即觸發。

下面是修改的Javascript代碼：

window.onload = function(){ 
    var rows = document.getElementsByClassName('data'); 
    var links = document.getElementsByTagName('a'); 
    var len = rows.length; 
    var color = '#FFFFBB'; 
    var hovered_index = -1; 
    var focused_index = -1; 
    var mouseover_allowed = true; 
    var set_color_onmouseover = function(index){ 
    return function(){ 
     if(mouseover_allowed){ 
     if(focused_index !== -1){ 
      rows[focused_index].style.backgroundColor = null; 
     } 
     rows[index].style.backgroundColor = color; 
     hovered_index = index; 
     } 
    } 
    } 
    var set_color_onmouseout = function(index){ 
    return function(){ 
     if(hovered_index !== -1){ 
     rows[index].style.backgroundColor = null; 
     hovered_index = -1; 
     } 
    } 
    } 
    var set_color_onfocus = function(index){ 
    return function(){ 
     if(hovered_index !== -1){ 
     rows[hovered_index].style.backgroundColor = null; 
     } 
     rows[index].style.backgroundColor = color; 
     focused_index = index; 
     // disable onmouseover for the next 100 milliseconds 
     mouseover_allowed = false; 
     setTimeout(function(){ mouseover_allowed = true; }, 100); 
    } 
    } 
    var set_color_onblur = function(index){ 
    return function(){ 
     if(focused_index !== -1){ 
     rows[index].style.backgroundColor = null; 
     focused_index = -1; 
     } 
    } 
    } 
    var i, j; 
    for(i = 0; i < len; i++){ 
    rows[i].onmouseover = set_color_onmouseover(i); 
    rows[i].onmouseout = set_color_onmouseout(i); 
    for(j = 0; j < 3; j++){ 
     links[i*3+j].onfocus = set_color_onfocus(i); 
     links[i*3+j].onblur = set_color_onblur(i); 
    } 
    } 
}

來源

2016-08-08 07:04:08

測試如果鼠標已真正在你感動r onmouseover事件？

所以：

rows[i].onmouseover = set_color(i, '#FFFFBB');

成爲

var lastEventCoords = {}; 

document.getElementById("id").addEventListener("mouseover", function(event) { 
    // If coords match, go home 
    if (lastEventCoords.X == event.screenX && 
     lastEventCoords.Y == event.screenY) { 
    return; 
    } 
    // If they don't match (i.e., mouse actually moved), this function will run 
    else { 
    alert('#FFFFBB') 
    } 

    lastEventCoords = { X: event.screenX, Y: event.screenY }; 
}, false);

編輯：工作jsFiddle。

編輯：有關更新的問題，還是編輯因此要堅持：

首先對按鍵的標籤的事件：

function checkTabPress(e) { 
    if (e.keyCode === 9) { 
    var rows = document.getElementsByClassName("data"); 

    if (var i = 0; i < rows.length; i++) { 
     rows[i].style.backgroundColor = null; 
    } 

    document.getActiveElement().style.backgroundColor = "#123456"; 
    } 
} 

document.addEventListener('keyup', function (e) { 
    checkTabPress(e); 
}, false);

來源

2016-08-07 12:17:09

如果我爲此，'onmouseover'不具有其期望的效果，即改變懸停的行的背景色。 –

爲什麼不呢？如果最後一個'onmouseover'事件的座標與前一個'ommouseover'事件不一致，就會發生。 –

@SharanyaDutta向JS添加了一條評論，以幫助您瞭解決策發生的位置。 –

如何防止onfocus後自動onmouseover？

回答

相關問題