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

Question

我希望直接从键盘打开我用鼠标站立的链接(即鼠标光标所在的链接):

相反，我单击鼠标左键打开链接，我的光标在上面飞过，我只需点击一些键盘组合，鼠标光标所在的位置将直接触发点击事件.

我没找到方法in this list或者在这个SE QA session .

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

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

Answer 1

您可以使用以下 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() 是迭代所有链接元素的解决方法。

• 将每个链接的 tabindex 属性设置为 '0' 允许我们监听链接上的 keydown 事件通过使链接可聚焦。

• 将每个链接的outline 样式属性设置为'none'。防止 ugly blue box当鼠标指针进入链接时不会出现在链接周围。

• 当鼠标指针进入链接区域时，我们用focus() 方法，这样我们就可以监听该链接上的 keydown 事件。然后我们添加一个事件监听器来监听 keydown 事件链接。