如何在 keydown 上使用 Javascript 模拟悬停?

How do I simulate hover with Javascript on keydown?(如何在 keydown 上使用 Javascript 模拟悬停?)

问题描述

首先，我想只使用原生 JavaScript 来完成这项任务.

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

假设我要制作一个自定义下拉菜单，HTML 代码看起来像这样.

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>

在 CSS 文件中，我有类似的东西:

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.

此时我看到的唯一选择(刚开始学习 JS)是获取 ul 的所有子项，将它们粘贴到一个数组中，并通过每当按下向下键时，JS 都会以正确的方式调用.

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.

另一方面，我仍然有鼠标控制的 CSS 中描述的 :hover 行为.有模拟悬停的聪明方法吗?

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?

推荐答案

我会在你的 li 元素上简单地分配一个类，并使用 keydown 处理程序来引导它.以下代码并不完整，而是为您提供一些可以使用的东西.

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 模拟悬停?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！