Javascript Trigger按下鼠标单击WITHOUT Jquery

时间:2017-07-01 06:22:59

标签: javascript onclick keypress

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

3 个答案:

答案 0 :(得分:2)

看看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>
&#13;
&#13;
&#13;

修改

当浏览器解析您的HTML并到达<script>标记时,它会立即执行其中的JavaScript。然而,可能发生的是,文档的其余部分尚未加载。

这意味着页面中的某些HTML元素尚未存在,您无法通过JavaScript访问它们(document.getElementById如果可以&#{1}}将返回null 39;找不到元素,你不能从null读取属性。

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

&#13;
&#13;
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);
  }
});
&#13;
<button onclick="dispatchAltN();">alt+n</button>
&#13;
&#13;
&#13;

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

幸运的是,浏览器在加载页面内容时会触发事件。此事件称为DOMContentLoaded

当您等待浏览器首先触发事件时,您可以确保可以访问DOM中的所有元素。

答案 1 :(得分:0)

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

答案 2 :(得分:0)

您可以按event code event.code触发任何<!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>

$data=array[
    'table'=>'ci',
    'where'=>'',
    'val'=>['name'=>$name,
        'pass'=>$pass,
        'mobile'=>$mobile,
        'date'=>$date,
        'status'=>$status
    ]
];
$this->load->model('show_model');
$this->show_model->insert_data($data);

相关问题