在 div 上激活 link

Question

在我的 HTML 中，我在 div 上做了这个 link。

<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>

但我正在寻找一种可能性，让 link 可以通过键盘上的按键激活。可能吗？

非常感谢

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

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

我根据自己的需要调整了代码，我运行遇到了一个问题，return 键。

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

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

但是在最后一页是return，就像这样：history.back()

可以使用退格键跟随这个 link ?

非常感谢

在 div 上激活 link

Activate link on div

html

javascript

keyboard

hyperlink