JavaScript 'keyup' 和 'keydown' 事件监听器只触发一次
我是一名 JavaScript 新手程序员 - 这是我在该语言中的第一个项目。我目前正在尝试运行一个临时“计时器”，该计时器在按下键时触发（keydown）并在释放键时结束（keyup）。出于测试目的，我还让每个函数在触发时打印一个语句。不幸的是，我只能让事件侦听器触发一次。我希望脚本在用户按下任意键时运行并响应输入。老实说，“计时器”是一个更大项目的占位符——让 keydown/keyup 事件在用户每次按下一个键时运行是重要的，而不仅仅是在初次按下时。
我已经尝试了很多不同的策略，我将在等待回应时继续研究这个问题。起初，我怀疑这个问题是因为我在加载 html 文档的头部部分设置了 JavaScript，但将其移动到正文并没有解决问题。我担心是因为我不是每次都写一个新行，但是更改为 document.writeln 并没有帮助。我已经尝试了几种简单的循环代码形式但没有成功 - 我目前正在研究如何使函数递归以查看是否有帮助。我也尝试将代码加载到 jquery 中，但无济于事（JQuery 甚至没有触发一次）。根据我对键盘记录所做的研究，我还对 window.setInterval 之类的东西做了一些工作，但我没有
// The initial script
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var start, finish, diff;
// Adds event listeners
document.addEventListener('keydown',startTimer);
document.addEventListener('keyup',endTimer);
// Runs on keydown, simply stores a new date
function startTimer(e){
start = new Date();
}
// Runs on keyup, stores a new date (time in milliseconds since
epoch),
// then takes and prints the difference between the two.
function endTimer(e){
finish = new Date();
diff = finish - start;
document.write(diff);
}
</script>
</head>
<body>
</body>
</html>
// "Most stable" version, utilizing onkeyup/onkeydown and writeln
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript">
var start, finish, diff;
document.onkeydown = function(e){
start = new Date();
document.writeln(start);
}
document.onkeyup = function(e){
finish = new Date();
diff = finish - start;
document.writeln(finish);
document.writeln(diff);
}
</script>
</body>
</html>
// JQuery version
<!DOCTYPE html>
<html>
<head>
</head>
我希望每次按下一个键时“网站”都会打印出精确的存储日期，然后在我释放它时打印出一个新日期以及两者之间的差异。相反，当我第一次按下一个键时，它会打印出信息，然后无论我做什么都不打印。
我会注意到 JQuery 目前甚至没有打印出第一条消息——我正在做更多关于为什么的研究——我只做了非常精简的 JQuery 研究。
白衣非少年2回答
-
慕雪6442864
我想你想要这样的东西。// The initial script<!DOCTYPE html><html> <head> <script type="text/javascript"> var start, finish, diff;// Adds event listenersdocument.addEventListener('keydown',startTimer);document.addEventListener('keyup',endTimer);// Runs on keydown, simply stores a new datefunction startTimer(e){ console.log('down', e) start = new Date(); } // Runs on keyup, stores a new date (time in milliseconds since // epoch), // then takes and prints the difference between the two. function endTimer(e){ console.log('up', e) finish = new Date(); diff = finish - start; console.log('diff', diff) document.querySelector('body').innerHTML = (diff); } </script> </head> <body> </body></html>问题是当你告诉endTimer写已经过去的时间量时：document.write(diff)您正在写入文档的根目录而不是文档中的元素。一旦被覆盖，你就没有一个 DOM 对象可以从中获取事件。 -
慕容708150
问题在于document.writeln()在事件处理程序中使用。使用console.log()，而不是修复该问题。说明：document.write()在页面加载后使用会清除当前文档，并用传递的任何字符串替换内容。学分var start, finish, diff; document.onkeydown = function(e){ start = new Date(); console.log(start); } document.onkeyup = function(e){ finish = new Date(); diff = finish - start; console.log(finish); console.log(diff); }<!--"Most stable" version, utilizing onkeyup/onkeydown and writeln--><!DOCTYPE html><html> <head> </head> <body> </body></html>
随时随地看视频慕课网APP
相关分类
JavaScript