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

    "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>

Answer 2

你addEventListener也可以removeEventListener。

为此，您需要对事件处理程序的引用，因此您不能使用匿名函数，而是使用命名函数或存储在变量中的函数。

编辑 这是使用 CTRL+单击的示例：

// CTRL + CLICK implementation

let hasCtrl = false;

// Store the handler in a constant or variable

const handleClick = function(event) {

  console.log(event.target.className);

}

// Use named function

function handleKeyDown(e) {

  if (e.keyCode === 16) {

    console.log('Yap! Shift works...');

  }

}

const setCtrlInactive = (e) => {

  if (!hasCtrl && e.keyCode === 17) {

    console.log('Nope! Ctrl does not work...');

    document.removeEventListener('click', handleClick);

    hasCtrl = true;

  }

}

const setCtrlActive = (e) => {

  if (hasCtrl && e.keyCode === 17) {

    console.log('Yap! Ctrl works...');

    document.addEventListener('click', handleClick);

    hasCtrl = false;

  }

}

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) {

  if (e.keyCode === 16) {

    console.log('Yap! Shift works...');

  }

  if (e.keyCode === 17 && ctrl === false) {

    console.log('Yap! Ctrl works...');

    ctrl = true;

  }

});

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

  if (e.keyCode === 17) {

    ctrl = false;

  }

});

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

  if (ctrl) {

    console.log(event.target.className);

  }

}, false);

相反，您应该使用 keyup 事件和标志变量。