激活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（）

可以使用backspace遵循此链接？

大谢谢