Javascript在没有Jquery的情况下单击鼠标时触发按键答案

【问题标题】：Javascript Trigger keypress on mouse click WITHOUT JqueryJavascript在没有Jquery的情况下单击鼠标时触发按键
【发布时间】：2017-07-01 18:12:41
【问题描述】：

我在这个网站上找到了很多结果，但他们似乎都使用 Jquery。我真的需要知道如何在没有 Jquery 的情况下做到这一点。我想要的是单击一个按钮并触发击键，例如 ALT+N 或 CTRL+G。谢谢。

【问题讨论】：

标签： javascript onclick keypress

【解决方案1】：

看看KeyboardEvent 构造函数。你可以这样使用它：

document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('alt-n').addEventListener('click', function () {
    // create a new keyboard event
    var event = new KeyboardEvent('keydown', {
      key: 'n',
      altKey: true
    });
    // dispatch the alt+n key press event
    document.dispatchEvent(event);
  });

  document.getElementById('ctrl-g').addEventListener('click', function () {
    // create a new keyboard event
    var event = new KeyboardEvent('keydown', {
      key: 'g',
      ctrlKey: true
    });
    // dispatch the ctrl+g key press event
    document.dispatchEvent(event);
  });

  // listen for any key presses
  document.addEventListener('keydown', function (e) {
    if (e.altKey || e.ctrlKey) {
      // alt or ctrl is pressed
      console.log('Key: ' + e.key + '; alt pressed: ' + e.altKey + '; ctrl pressed: ' + e.ctrlKey);
    }
  });
});

<button id="alt-n">alt+n</button>
<button id="ctrl-g">ctrl+g</button>

编辑

当浏览器解析您的 HTML 并到达 <script> 标记时，它会立即执行其中的 JavaScript。但是，可能还没有加载文档的其余部分。

这意味着页面中的某些 HTML 元素还不存在，并且您无法在 JavaScript 中访问它们（document.getElementById 将返回 null，如果它找不到元素并且您可以' t 从null 读取属性。

您必须等到元素加载完毕。当然，您可以创建一个函数并在 onclick 内联处理程序中调用它：

function dispatchAltN () {
  var event = new KeyboardEvent('keydown', {
    key: 'n',
    altKey: true
  });
  document.dispatchEvent(event);
}

document.addEventListener('keydown', function (e) {
  if (e.altKey || e.ctrlKey) {
    // alt or ctrl is pressed
    console.log('Key: ' + e.key + '; alt pressed: ' + e.altKey + '; ctrl pressed: ' + e.ctrlKey);
  }
});

&lt;button onclick="dispatchAltN();"&gt;alt+n&lt;/button&gt;

但是，您不应该使用内联 JavaScript。

幸运的是，浏览器在加载完页面内容后会触发一个事件。此事件称为DOMContentLoaded。

当您等待浏览器第一次触发事件时，您可以确定您可以访问 DOM 中的所有元素。

【讨论】：

得到错误“Uncaught TypeError: Cannot read property 'addEventListener' of null”。
我猜这是因为执行 JavaScript 时 DOM 元素尚未加载。您必须收听DOMContentLoaded 事件。我将编辑我的答案以使用此事件。
不，IE 中不支持KeyboardEvent。 developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…
快捷方式是什么意思？你不需要KeyboardEvent。是的，IE 不支持它，你必须使用initKeyboardEvent。
好的，现在可以了，谢谢。一个查询虽然，我设置了一个快捷键来触发我的 Mac 系统中的一个功能，但是这个程序没有触发它？实际上按 ALT+N 似乎与触发 ALT+N 的代码不同.....？

【解决方案2】：

HTML

<button onClick="myFunction()">Click me</button>

JavaScript

function myFunction(){
var k = new Event("keydown");
k.key="a"; //Change this value for different keys
document.dispatchEvent(k);
}

【讨论】：

就是按A键吗？如何像我的问题一样同时按下两个键？例如CTRL+ESCAPE？

【解决方案3】：

您可以通过code 即event.code 触发任何event

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <script>
    var ev = new Event('keydown');
    ev.code = 110; // change this code to specific event code to trigger it

    function Load() {

      var button = document.getElementById('btn');
        // Listen for the event.
      button.addEventListener('keydown', function(e) {
        if (e.code === 110) {
          alert('Successfully triggered ALT + N');
        }
        // write your logic here
      }, false);
    }

    function dispatchKeypress(e) {

      e.preventDefault();

      // Dispatch the event.
      e.target.dispatchEvent(ev);

    }
  </script>
</head>

<body onload="Load()">
  <button onclick="dispatchKeypress(event)" id="btn">Button</button>
</body>

</html>

【讨论】：

谢谢。但这真的是按 ALT+N 还是只按“N”？ 110 似乎只是“N”。你会如何按 ESCAPE 和 ALT？