在浏览器 HTML 元素上触发左键单击事件 - 直接从键盘

Question

我想直接从键盘打开 link 我用鼠标站立（即鼠标光标所在的 link）：

相反，我单击鼠标左键打开 link 我的光标在上方飞行，我只需点击一些 键盘组合 并且点击事件将是直接在鼠标光标所在的位置触发。

我没找到方法in this list or in this SE QA session。

_{我不是要用 Tab 键聚焦元素并按 CTRL + 输入，或}

document.querySelector('#myElement').click()

Answer 1

想法是在整个文档上为鼠标移动附加一个事件侦听器并捕获该元素的目标。这样你就知道鼠标悬停在哪个元素上然后你可以 dispatch a MouseEvent.

见下例（按G模拟点击）：

（CSS只是为了美观）

let lastMouseElement;
let lastMouseEvent;

document.addEventListener('mousemove', event => {
  if (event.target) {
    lastMouseEvent = event;
    lastMouseElement = event.target;
  }
});

document.addEventListener('keyup', event => {
  if (event.key.toLowerCase() === 'g') {
    if (lastMouseElement && lastMouseEvent) {
      console.log('simulated click');
      lastMouseElement.dispatchEvent(new MouseEvent('click', {
        clientX: lastMouseEvent.clientX,
        clientY: lastMouseEvent.clientY,
        screenX: lastMouseEvent.screenX,
        screenY: lastMouseEvent.screenY,
      }));
    }
  }
});


Array.from(document.querySelectorAll('.container *')).forEach(element => {
  element.addEventListener('click', () => {
    element.classList.add('flash');
    setTimeout(() => element.classList.remove('flash'), 1000);
  });
});

.container {
  height: 100vh;
  width: 100vw;
  background-color: palevioletred;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
}

.left, .right {
  flex: 1;
  margin: 0.5em;
  padding: 0.5em;
  background-color: peachpuff;
  display: flex;
  flex-direction: column;
}

.top, .bottom {
  flex: 1;
  margin: 0.5em;
  padding: 0.5em;
  background-color: papayawhip;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-size: 1.618em;
}

.flash {
  transition: all 200ms;
  background-color: white;
}

<div class="container">
  <div class="left">
    <div class="top">A</div>
    <div class="bottom">B</div>
  </div>
  <div class="right">
    <div class="top">C</div>
    <div class="bottom">D</div>
  </div>
</div>

Answer 2

您可以使用以下 JavaScript 代码完全实现您想要的效果，无需修改您的 HTML 或 CSS。

function listenToShortcut(e) {
  // Change the shortcut to what you desire
  if (e.ctrlKey && e.shiftKey && e.keyCode == 83) {
    e.target.click();
  }
}

var links = document.querySelectorAll('a');
Array.prototype.forEach.call(links, function(link) {
  link.setAttribute('tabindex', '0');
  link.style.outline = 'none';
  link.addEventListener('mouseenter', function(me) {
    link.focus();
    link.addEventListener('keydown', listenToShortcut);
  });
  link.addEventListener('mouseleave', function() {
    link.removeEventListener('keydown', listenToShortcut);
  });
});

在这个例子中，快捷方式是Ctrl + Shift + s。你可以改成你需要的。

解释

Array.prototype.forEach.call() 是遍历所有 link 元素的解决方法。
将每个 link 的 tabindex 属性设置为 '0' 允许我们在 link 通过使 link 可聚焦.
将每个 link 的 outline 样式属性设置为 'none'。当鼠标指针进入时，防止 ugly blue box 出现在 link 周围。
当鼠标指针进入link区域时，我们将link与 focus() 方法，这样我们就可以在 link 上监听 keydown 事件。然后我们添加一个监听 keydown 事件的事件监听器 link.

在浏览器 HTML 元素上触发左键单击事件 - 直接从键盘

Triggering left button click event on browser HTML element - directly from keyboard

html

javascript

keyboard

mouse

解释