如何在keydown上模拟悬停Javascript？ [英] How do I simulate hover with Javascript on keydown?

问题描述

首先，我只想使用原生JavaScript来完成此任务。

假设我要制作自定义下拉菜单，并且HTML代码看起来像

 < div class =dropdown> 
< span class =dropdown-labelstyle =display：block>选择一个东西< / span> 
< ul class =dropdownItemContainer> 
< li>第1项< / li> 
< li>第2项< / li> 
< li>第3项< / li> 
< li>第4项< / li> 
< li>第5项< / li> 
< li>第6项< / li> 
< / ul> 
< / div> 
  

在CSS文件中，我有一些与之相近的东西：

  ul.dropdownItemContainer li：hover {
 background-color：＃FF0000; 
} 
  

是的，实际上没有dropdownish行为，但实际上这不是讨论的焦点。问题是，我想不出一个体面的方式来为这个下拉菜单启用键盘控制。期望的结果如下：我按下向下键，第一个选项突出显示;我再次按下它，第二个选项突出显示等等。

我现在看到的唯一选项（刚开始学习JS）是获取所有 ul 的子元素，粘贴到一个数组中，并在每次按下向下键时通过JS方法以适当的方式为背景颜色分配背景颜色。

另一方面，我仍然在CSS中描述鼠标控制的悬停行为。是否有一种模拟悬停的巧妙方法？

解决方案

我会在你的li元素上简单地分配一个类，用keydown处理程序引导它。

  var active = document.querySelector（ .hover）|| document.querySelector（。dropdownItemContainer li）; 
 
 document.addEventListener（keydown，handler）; 
 document.addEventListener（mouseover，handler）; 
 
函数处理程序（e）{
 console.log（e.which）; 
 active.classList.remove（hover）; 
 if（e.which == 40）{
 active = active.nextElementSibling ||活性; 
} else if（e.which == 38）{
 active = active.previousElementSibling ||活性; 
} else {
 active = e.target; 
} 
 active.classList.add（hover）; 
} 
  

您可以看到 这里的工作示例

First of, I'd like to use only native JavaScript to complete this task.

Let's say I am to make a custom dropdown, and the HTML code looks kind of like this.

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

In the CSS file I have something close to this:

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

Yeah, there's really no dropdownish behavior, but it's not the point of discussion actually. The problem is that I couldn't think of a decent way to enable keyboard control for this dropdown. The desired outcome is the following: I press the down key, and the first option is highlighted; I press it again, and the second option is highlighted and so on.

The only option that I see at this point (just started studying JS) is to fetch all of the ul's children, stick'em into an array and assign the tags a background color through JS methods in a proper way whenever the down key is pressed.

On the other hand, I still have the :hover behavior described in the CSS for mouse countrol. Is there a smart way of simulating hovers?

解决方案

I would go with a simple assignment of a class on your li-elements and steer it with a keydown handler. The following code is not meant to be complete but give you something you can work with.

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

You can see a working example here

这篇关于如何在keydown上模拟悬停Javascript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！