javascript - 通过按键和点击执行 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

在处理事件时添加事件处理程序通常是解决问题的错误方法。想象一下您将如何累积添加处理程序...在您的情况下，最终将有许多绑定(bind)到同一个点击处理程序。

最好立即绑定(bind)您需要的处理程序，然后在处理事件时保持关于确切需要发生什么的状态。

在这些键处理程序(keydown、keyup)中，跟踪是否按下了 Shift/Control 键。

此外，使用 e.key 作为 e.keyCode 已弃用。

这是它的工作原理:

let keys = {
    "Shift": false,
    "Control": false
};
function keyToggle(e) {
    if (!(e.key in keys)) return; // not ctrl or shift
    let isKeyDown = e.type === "keydown";
    if (isKeyDown === keys[e.key]) return; // key position did not change
    keys[e.key] = isKeyDown;
    console.log(e.key + (isKeyDown ? " pressed" : " released"));        
}

document.addEventListener("keydown", keyToggle, false);
document.addEventListener("keyup", keyToggle, false);
document.addEventListener('click', function (e) {
    if (keys["Control"]) console.log(event.target.className); 
}, false);

<main class="main">Main</main>
<aside class="aside">Aside</aside>