如何使用键盘事件模拟悬停

Posted 2023-03-13

【中文标题】如何使用键盘事件模拟悬停

【英文标题】：How to simulate the hover with keyboard events

【发布时间】：2017-07-13 09:20:14

【问题描述】：

我有以下 html 模板，其中列表项被动态添加到下拉列表中。

<button class="btn btn-default btn-sm dropdown" (keydown)="triggerTraverse($event)"></button>
    <fa-list-filler>
        <li *ngFor="let item of items [class.active]="checkItem(item,selectedItem)">
            <span (click)="doNavigate()" class="cookie"></span>
        </li>
    </fa-list-filler>

我有以下列表项的悬停样式：

li > .cookie 
        cursor: pointer;
        &:hover
            background-color: 'yellow';
        
    

当我用鼠标悬停这些列表项时，我可以看到应用于列表项的悬停样式，即在这种情况下我可以看到黄色背景颜色。

默认情况下，第一个项目被选中，即它的类处于活动状态。然后，当用户按下向下箭头键时，活动类保持在同一个位置，但悬停状态应该向下移动到下一个列表项，然后移动到下一个项目，并且应该环绕。

我实现了以下方法，但无法正确处理后续元素。

triggerTraverse(evt: KeyboardEvent)
   if(evt.keyCode === 27)
    closeDropdown();
else if(evt.keyCode === 40)
    let initialEle = document.querySelector('li.active');
initialEle.nextElementSibling.firstElementChild.classList.add('hoverstyle');

hoverstyle 是我刚刚实现的另一个类，用于将背景色添加到元素中。

.hoverstyle
 background-color: 'pink';

谁能帮忙。

【问题讨论】：

你看到类hoverstyle添加到了inspect元素中的li吗？

是的。但这只发生在第二个元素上，因为我没有做任何进一步的事情来遍历整个列表。

Kul，回答这个问题，如果逻辑说从li.active（你的第一个元素）开始然后向下移动，它真的会超出第二个元素吗？

没有。它没有！在这种情况下，它只是停留在第二个元素上！

这正是重点。在当前逻辑中，它总是从最顶层的元素 li.active 开始。所以每次你按下向下键时，下一个元素总是第二个元素。

【参考方案1】：

跟踪所选索引并使用ngClass 指令。

例如：

模板：

<input ... (keydown)="onKeydown($event)">
<div *ngFor="let option of options; let i = index;"
     (mouseover)="highlight(i)"
     [ngClass]="'selected': i === selectedIndex">
    <span> option </span>
</div>

组件：

selectedIndex = 0

...

highlight(i: number) 
    this.selectedIndex = i;


onKeydown(event: KeyboardEvent) 
    if (event.code === 'ArrowUp' && this.selectedIndex > 0) 
        event.preventDefault();
        this.selectedIndex--;
     else if (event.code === 'ArrowDown' && this.selectedIndex < (this.options.length - 1)) 
        event.preventDefault();
        this.selectedIndex++;
     

css:

.selected 
    background-color: red;

【讨论】：

我面临一个问题，当下拉列表中有很多元素时，当我继续使用向下或向上箭头遍历列表时，这些元素不会出现。我怎样才能做到这一点？有什么提示吗？

这行得通... @ViewChild("scroll") scroll: ElementRef; ngAfterViewInit(): 无效 this.scroll.nativeElement.scrollIntoView(false);