javascript - 如何在执行某个 Action 后自动触发回车键按下事件？

Question

我正在我的网络应用程序中编写一些单元测试，我想在例如单击下载到文本文件按钮后从我的页面自动触发 Enter 键按下事件。我如何在 jQuery 或 Javascript 中执行此操作？

Answer 1

1. 创建一个变量，告诉我们用户是否点击了您的按钮。

   var clicked = false;
   

2. 为您的按钮添加一个事件监听器，以便当用户单击它时，clicked 变量将变为 true。

   myButton.addEventListener('click', function(){
     clicked = true;
   });
   

3. 添加一个 keypress 事件监听器:

   document.addEventListener('keypress', function(e) {
     // `e` is the event
   });
   

4. 在该事件监听器中，检查用户之前是否单击过

   if(clicked) {
     // ...
   }
   

5. 如果他(她)做到了，请检查按下的键。 Enter键码为13。

   var keynum = e.keyCode||e.which;
   if(keynum == 13) {
      // ...
   }
   

6. 如果按下的键是回车，使用

   clicked = false;
   

   否则，一旦用户点击了您的按钮并按下了回车键，就没有必要再次点击该按钮了。

7. 然后运行您的代码。例如，这将在 2 秒后调用函数 f。

   setTimeout(f, 2000);
   

现场演示

var clicked = false;
document.querySelector('#btn').addEventListener('click', function(){
  clicked = true;
  snippet.log("You clicked the button. `clicked` is now `true`");
});
document.addEventListener('keypress', function(e) {
  if(clicked) {
    var keynum = e.keyCode || e.which;
    if(keynum == 13) {
      clicked = false; 
      snippet.log("`clicked` is now `false`. Waiting 2 seconds...");
      setTimeout(f, 2000);
    }
  }
});
function f() {
  snippet.log("Function `f` executed successfully!");
}

#btn {
  border: 3px solid red;
  cursor: pointer;
}

<div id="btn">Click me, and then press enter.</div>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 --><script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>