激活 div 上的链接

Question

在我的 HTML 中，我做了这个是为了在 div 上有链接。

<div id="up" onclick="location.href='#'"></div>
<div id="down" onclick="location.href='#'"></div>
<div id="left" onclick="location.href='#'"></div>
<div id="right" onclick="location.href='#'"></div>

但我正在寻找使用键盘上的键激活链接的可能性。有可能吗？

非常感谢

Answer 1

这里我们监听按键并映射到点击元素。

document.addEventListener('keyup', (e) => {
  let elem;
  console.log(e.key);
  switch (e.key) {
    case "ArrowDown":
      elem = "down";
      break;
    case "ArrowUp":
      elem = "up";
      break;
    case "ArrowLeft":
      elem = "left";
      break;
    case "ArrowRight":
      elem = "right";
      break;
    case "Backspace":
      elem = "back";
      break;
  }

  if (elem) elem = document.querySelector(`#${elem}`);

  if (elem) {
    // Prevent event.
    e.preventDefault();
    e.stopPropagation();
    elem.innerText = "Clicked";
    elem.click();
  }
});

div {
  min-width: 100px;
  min-height: 25px;
  border: 1px solid blue;
}

<div id="up" onclick="location.href='#'"></div>
<div id="down" onclick="location.href='#'"></div>
<div id="left" onclick="location.href='#'"></div>
<div id="right" onclick="location.href='#'"></div>
<div id="back" onclick="location.href='google.fr'"></div>

Answer 2

完美。这完全是我需要的..

我根据需要调整了代码，但遇到了一个问题，即返回键。

case "Backspace":
elem = "return";
break;

<div id="return" onclick="location.href='../page.html'"></div>

但它在最后一页返回，就像这样：history.back()

点击此链接可以使用退格吗？

非常感谢