通过按键和点击来执行 JavaScript 代码的不同部分

Question

我有 3 个不同任务的代码，我想通过单击并按下一个键来执行这些任务，因此将有 3 种不同的单击和按下组合。例如-

window.addEventListener("keydown", function(e){

if(e.keyCode === 16) {console.log('Yap! Shift works...');}

if(e.keyCode === 17) {console.log('Yap! Ctrl works...');

document.addEventListener('click',function (event) {

console.log(event.target.className); 

}, false);

          }     

 },false);

现在，当我按下 shift 键时，我会得到相关的输出，当我单击Ctrl键然后单击时，我会得到我单击的对象的类名。

但问题是，输出一直在我握着钥匙的时候出现！！我想执行一次我的代码部分，并且恰好在按下键并单击时发生。

我怎样才能做到这一点？

通常，如何通过有效地单击和按下来为三个不同的任务执行 3 部分代码？

Answer 1

在处理事件时添加事件处理程序通常是解决问题的错误方法。想象一下您将如何累积添加处理程序……在您的情况下，最终将有许多绑定到同一个点击处理程序。这是更好地绑定处理程序，你需要立即，然后用保持对究竟需要工作状态，同时处理的事件发生。在这些键处理程序 ( keydown, keyup) 中，跟踪是否按下了 Shift/Control 键。此外，不推荐使用e.keyas e.keyCode。这是如何工作的：let keys = {&nbsp; &nbsp; "Shift": false,&nbsp; &nbsp; "Control": false};function keyToggle(e) {&nbsp; &nbsp; if (!(e.key in keys)) return; // not ctrl or shift&nbsp; &nbsp; let isKeyDown = e.type === "keydown";&nbsp; &nbsp; if (isKeyDown === keys[e.key]) return; // key position did not change&nbsp; &nbsp; keys[e.key] = isKeyDown;&nbsp; &nbsp; console.log(e.key + (isKeyDown ? " pressed" : " released"));&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;}document.addEventListener("keydown", keyToggle, false);document.addEventListener("keyup", keyToggle, false);document.addEventListener('click', function (e) {&nbsp; &nbsp; if (keys["Control"]) console.log(event.target.className);&nbsp;}, false);<main class="main">Main</main><aside class="aside">Aside</aside>

Answer 2

你addEventListener也可以removeEventListener。为此，您需要对事件处理程序的引用，因此您不能使用匿名函数，而是使用命名函数或存储在变量中的函数。编辑 这是使用 CTRL+单击的示例：// CTRL + CLICK implementationlet hasCtrl = false;// Store the handler in a constant or variableconst handleClick = function(event) {&nbsp; console.log(event.target.className);}// Use named functionfunction handleKeyDown(e) {&nbsp; if (e.keyCode === 16) {&nbsp; &nbsp; console.log('Yap! Shift works...');&nbsp; }}const setCtrlInactive = (e) => {&nbsp; if (!hasCtrl && e.keyCode === 17) {&nbsp; &nbsp; console.log('Nope! Ctrl does not work...');&nbsp; &nbsp; document.removeEventListener('click', handleClick);&nbsp; &nbsp; hasCtrl = true;&nbsp; }}const setCtrlActive = (e) => {&nbsp; if (hasCtrl && e.keyCode === 17) {&nbsp; &nbsp; console.log('Yap! Ctrl works...');&nbsp; &nbsp; document.addEventListener('click', handleClick);&nbsp; &nbsp; hasCtrl = false;&nbsp; }}document.addEventListener("keyup", setCtrlInactive);document.addEventListener("keydown", setCtrlActive);document.addEventListener("keydown", handleKeyDown);<main class="main">Main</main><aside class="aside">Aside</aside>

Answer 3

那是因为您调用addEventListener('click')了 keydown 事件处理程序。let ctrl = false;window.addEventListener("keydown", function(e) {&nbsp; if (e.keyCode === 16) {&nbsp; &nbsp; console.log('Yap! Shift works...');&nbsp; }&nbsp; if (e.keyCode === 17 && ctrl === false) {&nbsp; &nbsp; console.log('Yap! Ctrl works...');&nbsp; &nbsp; ctrl = true;&nbsp; }});window.addEventListener("keyup", function(e) {&nbsp; if (e.keyCode === 17) {&nbsp; &nbsp; ctrl = false;&nbsp; }});document.addEventListener('click', function(event) {&nbsp; if (ctrl) {&nbsp; &nbsp; console.log(event.target.className);&nbsp; }}, false);相反，您应该使用 keyup 事件和标志变量。