当只发生第一个事件时，如何考虑第二个事件？ [复制]答案

【问题标题】：How to consider an second event when only the first one happens? [duplicate]当只发生第一个事件时，如何考虑第二个事件？ [复制]
【发布时间】：2021-11-21 08:56:36
【问题描述】：

我正在尝试使用键盘事件，但我只能使用第一个事件来做到这一点，在本例中为 key-down，但是当我尝试 key-up 时没有任何反应。

const box = document.createElement("div")
box.setAttribute("id", "box")
document.querySelector("body").appendChild(box)

let boxTop = 20;
let boxLeft = 20;

document.addEventListener("keydown", (e) => {
    let keyName = e.key
    if(keyName === "ArrowDown") {
        box.style.top = boxTop + "10px"
    }
})

document.addEventListener("keyup", (e) => {
    let keyName = e.key
    if(keyName === "ArrowUp") {
        box.style.top = boxTop - "10px"
    }
})

【问题讨论】：

你的标题甚至没有被提及。你能添加更多关于你想要什么和正在发生的事情的细节吗

标签： javascript dom

【解决方案1】：

你需要绝对位置并且你需要使用

(boxTop + 10)+"px"
(boxTop - 10)+"px"

加减号改为

+= 和-= 如果你想继续移动

也许是测试你是否处于领先地位？

为什么不在两个事件处理程序上都使用 keyDown？

const box = document.createElement("div")
box.setAttribute("id", "box")
document.querySelector("body").appendChild(box)

let boxTop = 20;
let boxLeft = 20;

document.addEventListener("keydown", (e) => {
  let keyName = e.key
  if (keyName === "ArrowDown") {
    box.style.top = (boxTop += 10)+"px"
  }
})

document.addEventListener("keyup", (e) => {
  let keyName = e.key
  if (keyName === "ArrowUp") {
    let  top = (boxTop -= 10);
    if (top<0) top = 0; // unleess you want them to move out of viewport
    box.style.top = top+"px"
  }
})

div { border: 1px solid black; height: 100px; width:100px;  position: absolute;  }

【讨论】：

也许还在keyup监听器中添加一个检查以检查boxTop > 0。
好的，我做到了，但也许 OP 希望它更高

【解决方案2】：

事件发生了。因此没有任何变化。

box.style.top = boxTop - "10px"
box.style.top = boxTop + "10px"

请改一下。

box.style.top = boxTop - 10 + "px"
box.style.top = boxTop + 10 + "px"

【讨论】：

我很惊讶第二个不给 2010px
@mplungjan: + 和 - 是从左到右关联的 ((boxTop - 10) + "px")。
我永远不会相信 :) 我知道 - 有效，但还有！？