按Tab键的类目不能正确添加和删除

Question

我试图为所有被tab键导航的对象添加一个CSS类。

我有下面的代码，它正在运行一个函数，检查tab键是否被按下。如果tab键已经存在，则尝试删除tab键CSS类。但是我的页面上只有一个元素（顶部元素）删除了所有其他元素的CSS。而不是当有人用tab键导航时，如果存在该类就会被删除。

我使用了这个在Gatsby网站上剪下的代码。

 function checkTabPress(e) {
    if (e.keyCode === 9) {

      if(e.target.classList.contains('tabbed')) {
        e.target.classList.remove('tabbed')
      }else {
        e.target.classList.add('tabbed');
      }
    }
  }

  document.addEventListener('keydown', checkTabPress);

Answer 1

与其在文档中添加事件监听器，你应该为每个你想拥有这个功能的元素添加一个（你应该为元素添加id）。否则，事件监听器将被调用每次你的标签，即使你不标签的元素，你想要的，将检查整个文档，因为它是现在这样做。

也许你可以做这样的事情。

function checkTabPress(e) {
  if (e.keyCode === 9) {
    if(e.target.classList.contains('tabbed')) {
      e.target.classList.remove('tabbed')
    }else {
      e.target.classList.add('tabbed');
    }
  }
}

var myElement = document.getElementById("my_cool_id");
myElement.addEventListener('keydown', checkTabPress);

//element 
<div id="my_cool_id"/>

另一个选项，我忘了是这样的。你可以循环检查元素，包括被标签的类。但是，如果所有的元素默认都有这个类，那么这个方法就会有效。

document.querySelectorAll('.tabbed').forEach(item => {
   item.addEventListener('keydown', checkTabPress)
})

或者你可以直接创建一个新的类，例如叫做 tabbable你将把它放在你想拥有这个事件监听器的每个元素上。

document.querySelectorAll('.tabbable').forEach(item => {
   item.addEventListener('keydown', checkTabPress)
})