Question

我有一个移动菜单，单击“打开菜单”按钮时会打开。我试图在打开菜单时向其添加陷阱焦点功能，以使用户在单击时无法使用键盘访问菜单之外的内容。

我已经使用事件侦听器来侦听菜单中的制表符和下移制表符按下事件。逻辑是，如果活动元素不具有仅我的菜单项必须具有的类，则将焦点锁定在菜单的关闭按钮上。

问题是焦点立即卡在我的关闭按钮上，我无法移动它（即使它具有“ in-listview”类）。我意识到我的代码可能不是实现此功能的最佳方法，但是现在我只想知道为什么我的班级似乎未被认可，因此我可以整理一下。我的应用是使用ReactJS构建的。

openNav = () => {
const listView = document.querySelector(".listview");

listView.classList.remove('closeMobMenu');
listView.style.visibility = "visible";
listView.classList.add('openMobMenu');
document.addEventListener('keydown', this.trapTabMobMenu)//Maybe move this to componentDidMount()?
}

trapTabMobMenu = (event) => {

if(event.keyCode === 9) { // if the tab key is pressed in the mobile menu
  const closeBtn = this.closeBtn;
  let activeElement = document.activeElement;

  if(event.shiftKey) { // shift-tab
    event.preventDefault();
    //if focused element does not have class in-list-view
    if(!activeElement.classList.contains("in-listview")) {
      closeBtn.focus();
    }
  } else { // normal tab
    event.preventDefault();
    if(!activeElement.classList.contains("in-listview")) {
      closeBtn.focus();
    }
  }
}
if(event.keyCode === 27) {
  this.closeNav();
}

}

<button ref={(close) => { this.closeBtn = close; }} className="closebtn in-listview" onClick={closeNav} onKeyPress={handleKeyPress} tabIndex="2">&times;</button>

Answer 1

document.activeElement直到焦点事件完成后才设置，因此上面的代码不会在触发onFocus事件的新元素上执行您的逻辑。

您需要将document.activeElement更改为event.target，然后执行您的逻辑。

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement

事件监听器似乎无法识别我的课程？

1 个答案: