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

Question

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

Answer 1

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);
}

Answer 2

您可以通过 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>

Answer 3

看看 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 将 return null 如果找不到元素并且您无法从 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);
  }
});

<button onclick="dispatchAltN();">alt+n</button>

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

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

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

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

Javascript Trigger keypress on mouse click WITHOUT Jquery

javascript

keypress

onclick