触发单击悬停元素上的按键

Question

我想知道是否有任何方法可以在按下任意键时获取鼠标当前悬停的元素。

我好像没找到类似的东西。谢谢！

Answer 1

通过结合两个事件，有一个半好的工作解决方案

首先你需要 window 上的 mousemove 事件来跟踪光标位置：

window.addEventListener('mousemove', (e) => {
       window.pos = [e.clientX, e.clientY]; // here we just save the last cursor position inside the window object in a new property, so we can access it globally
})

然后我们将需要另一个事件侦听器来触发键盘事件，例如 keydown:

window.addEventListener('keydown', () => {
       // using the elementFromPoint method to determine what the element is under the cursor, by accessing our saved position
       console.log(document.elementFromPoint(window.pos[0], window.pos[1]))

});

这个组合工作正常，但我不知道浏览器对方法的支持是什么elementFromPoint(x,y)

Answer 2

您可以将 mouseover 事件添加到要悬停的元素，然后添加 keydown 事件侦听器以调用自定义函数。在该函数中，您可以使用查询选择器来获取悬停的元素，并在您的代码中使用它。然后，您可以删除 mouseout 上的 keydown 事件侦听器。

window.focus();

document.querySelectorAll(`.hover-div`).forEach(elmnt => {
  elmnt.addEventListener(`mouseover`, (event) => {
    document.addEventListener(`keydown`, logElement)
  });
  elmnt.addEventListener(`mouseout`, (event) => {
    console.clear();
    document.removeEventListener(`keydown`, logElement)
  })
});

function logElement() {
  const elem = document.querySelector(`.hover-div:hover`); 
  console.log(elem.outerHTML)
}

body {
  background: #e2e1e0;
}

div.container div {
  background: white;
  padding: 25px;
  margin: 15px;
  display: inline-block;
  border: 1px solid black;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.hover-div:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

<div class="container">
  <div class="hover-div" title="div-1">1</div>
  <div class="hover-div" title="div-2">2</div>
  <div class="hover-div" title="div-3">3</div>
</div>

Answer 3

试试这个 windows 事件：

var positionHovered = []

document.addEventListener('mousemove', (e) => {
       positionHovered = [e.clientX, e.clientY];
})

document.addEventListener('keydown', () => {
console.clear();
console.log(document.elementFromPoint(positionHovered[0], positionHovered[1]).id);
});

div{
  border: 1px solid black;
  padding: 20px;
  text-align: center;
  margin: 5px;
}

div:hover{
  background-color: #dedede;
}

<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>

触发单击悬停元素上的按键

Trigger click on keypress on hovered element

javascript

jquery

click

keypress