javascript - 如何仅在选项卡上而不是在单击时设置元素的轮廓？

Question

我正在执行一些可访问性 (ADA) 任务，团队要求我仅在选项卡上设置可视指针，而不是在点击时设置。

现在，当我单击 anchor 以及在它们上方切换时，我可能会看到浅蓝色轮廓。我需要该大纲仅显示在选项卡上。

有什么建议吗？

Answer 1

您只需要在 click 事件上移除 outline，并在 focus 事件上设置 outline。

var elements = Array.from(document.querySelectorAll("a"));

elements.forEach(a => a.addEventListener("click", function() {
  a.classList.add("no-outline");
}));

elements.forEach(a => a.addEventListener("focus", function() {
  a.classList.remove("no-outline");
}));

.no-outline {
  outline: 0;
}

Some text. <a href="#">This is link</a>.
Also we have <a href="#">another link</a>