Material UI Popover - 模拟 keydown 事件的问题

Question

Material UI Popover - 模拟 keydown 事件的问题

javascriptreactjsevent-handlingmaterial-uikeyevent

3

任务是使用箭头键而不是TAB/TAB+SHIFT在下拉列表中导航。其中一个想法是替换箭头键的向下事件以模拟TAB/TAB+SHIFT键向下事件。我的方法归结为以下代码，成功阻止了默认的箭头键事件并触发了显示警报的TAB键代码。

不幸的是，它没有将突出显示移动到所需的列表项，并且除了在文档上触发TAB键事件外什么也没有发生。

有任何想法为什么它不起作用吗？

handleKeyDown = (e) => {
let element  = e.currentTarget;

switch (e.keyCode) {
  case 40:
  e.preventDefault();
  const event = new KeyboardEvent("keydown", { view: window, bubbles: true, cancelable: true, keyCode: 9, shiftKey: false });
  element.dispatchEvent(event);
  break;
}
switch (e.keyCode) {
  case 38:
  e.preventDefault();
  const event = new KeyboardEvent("keydown", { view: window, bubbles: true, cancelable: true, keyCode: 9, shiftKey: true });
  element.dispatchEvent(event);
  break;
}

// the switch case 9 is only used for debugging purposes
     switch (e.keyCode) {
          case 9:
          e.preventDefault();
          alert ("You pressed the 'TAB' key!");
          break;
        }

<Popover onKeyDown={this.handleKeyDown}>

- Nyoques

您正在尝试导航哪个元素？ - Toumash

首先，如果你想处理不同的情况，请使用单个switch语句进行处理，如下所示：switch (e.keycode) { case 40: // 代码\n case 38: // 代码\n case 9: // 代码\n } - Udaya Prakash

@Toumash 在输入字段和下拉列表的元素列表中 - 就像当前 TAB/TAB+SHIFT 的工作方式一样。 - Nyoques

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Udaya Prakash · Answer 1

由于您正在处理e.keycode==9并阻止该块中的默认事件，

switch (e.keyCode) {
  case 9:
  e.preventDefault();
  alert ("You pressed the 'TAB' key!");
  break;
}

当你在行中按下或释放某个键时触发键9，

const event = new KeyboardEvent("keydown", 
                               { view: window,
                                 bubbles: true,
                                 cancelable: true,
                                 keyCode: 9,
                                 shiftKey: true });

您实际上正在触发块的case 9，其中e.preventDefault()防止其执行默认行为。

解决方案是删除e.preventDefault()用于case 9。但是，当在该元素上按Tab键时，它也会起作用。

建议：使用单个开关和我在上面的评论中提到的许多情况。这是Javascript中switch case的正确语法。