如何使用Javascript在keydown上模擬懸停？

首先，我只想使用本機JavaScript來完成此任務。如何使用Javascript在keydown上模擬懸停？

假設我要製作一個自定義下拉菜單，而HTML代碼看起來就像這樣。

<div class="dropdown"> 
    <span class="dropdown-label" style="display:block">Select a thing</span> 
    <ul class="dropdownItemContainer"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
    </ul> 
</div>

在CSS文件中我有一些接近這一點：

ul.dropdownItemContainer li:hover { 
    background-color: #FF0000; 
}

呀，真的沒有dropdownish行爲，但它實際上是不在討論點。問題是，我想不出一個體面的方式來爲這個下拉菜單啓用鍵盤控制。期望的結果如下：我按下向下鍵，第一個選項突出顯示;我再次按下它，第二個選項突出顯示，依此類推。

我在這裏看到的唯一選項（剛開始學習JS）是獲取所有ul的孩子，將stick'em粘貼到一個數組中，並通過JS方法以適當方式爲標籤分配背景顏色每當按下向下鍵時。

另一方面，我仍然在CSS中描述鼠標控制的懸停行爲。有沒有一種智能的模擬盤旋的方法？

來源

2013-02-07 Anton Matyulkov

鍵盤導航的例子大量使用'：焦點'。 –

@AlessandroVendruscolo是真實的，但我不能真正關注任何比或常規控制元素都好的東西，對嗎？ :) –

只有jQuery解決方案出現在我的腦海裏:( –

我會去與你的鋰元素類的簡單的分配和使用的keydown的處理程序引導它。下面的代碼並不完整，但給你一些你可以使用的東西。

var active = document.querySelector(".hover") || document.querySelector(".dropdownItemContainer li"); 

document.addEventListener("keydown",handler); 
document.addEventListener("mouseover",handler); 

function handler(e){ 
    console.log(e.which); 
     active.classList.remove("hover"); 
    if (e.which == 40){ 
     active = active.nextElementSibling || active; 
    }else if (e.which == 38){  
     active = active.previousElementSibling || active; 
    }else{ 
     active = e.target; 
    } 
     active.classList.add("hover"); 
}

你可以看到一個working example here

來源

2013-02-07 09:41:15 Christoph

+1我冒昧地將它與你的代碼Loki合併。隨時接受這個答案。見http://jsfiddle.net/samliew/Hd7X9/4/ –

謝謝你的時間傢伙。 –

非常感謝解決方案，我在相當長的時間內也遇到了同樣的問題。 –

您可能想使用庫而不是從頭開始編碼。

http://vebersol.net/demos/jquery-custom-forms/

http://www.dreamcss.com/2009/05/15-jquery-plugins-to-enhance-your-html.html

來源

2013-02-07 09:22:11

謝謝您的回答，但正如我所提到的，我正在努力學習原生的JS，所以我真的想從頭開始編寫這個東西，我知道JQuery提供了很多可能性和定製選項，我承認它們很酷且很有用，但我最終會得到它:) –

If你可以提供一個鏈接，或者在[jsfiddle]（http://jsfiddle.net）上重新創建它，我們可以協同工作。 –

http://jsfiddle.net/Hd7X9/ - 在這裏，你去。我在Facebook上寫過你，我猜你需要給你更多的背景。 –

事實上你並不需要爲下拉任何JS，但你可以使用JavaScript事件來模擬它。您可以使用事件像懸停，重點，的onclick

在JS你可以使用這個對於設置事件

document.getElementById('id').addEventListener('focus',function(e){ 
    //place code that want ran at event happened 
    }

在jQuery中您可以使用綁定，點擊。 ..

$('#id')bind('focus',function(e){ 
    //place code that want ran at event happened 
    }

事件列表

http://www.quirksmode.org/dom/events/index.html

來源

2013-02-07 09:34:02

你不能將焦點放在純粹的列表元素上...... – Christoph

@Christoph是的，我們可以使用焦點事件http://www.quirksmode.org/dom/events/index.html –

好吧，焦點元素被支持的事實是不改變只有'window'，鏈接和表單域可以被默認集中的事實。否則，你需要在元素上聲明'tabindex'，即使這樣，焦點也不一致地被支持。 – Christoph

我建議去除CSS懸停屬性。而且只添加這是對按鍵和鼠標懸停

這可能看起來像這樣在代碼中應用了懸停類

var dropDown = document.getElementsByClassName("dropdownItemContainer")[0] 

document.addEventListener("keydown",function (e) { 
    if(e.keyCode == 38 || e.keyCode == 40) { 
     var key = e.keyCode 
     var hovered = dropDown.getElementsByClassName("hovered") 
     if(hovered.length != 0) { 
      cur = hovered[0] 
      cur.className = "" 
      cur = cur[(key==38?"previous":"next")+"ElementSibling"] || dropDown.children[key==38?dropDown.children.length-1:0] 
     } else { 
      cur = dropDown.children[key==38?dropDown.children.length-1:0] 
     } 
     cur.className="hovered" 
    } 
}); 


dropDown.addEventListener("mouseover",function (e) { 
    for(var i = 0,j; j = dropDown.getElementsByClassName("hovered")[i];i++) 
     j.className = ""; 
    e.srcElement.className = "hovered"; 
});

繼承人上JSFiddle

來源

2013-02-07 10:31:32 C5H8NNaO4

如何使用Javascript在keydown上模擬懸停？

回答

相關問題