這個問題在這里已經有了答案： onKeyPress 對比 onKeyUp 和 onKeyDown （13 個回答） 8 天前關閉。
我正在嘗試使用鍵盤事件，但我只能使用第一個事件（在本例中為按下鍵），但是當我嘗試按下鍵時，什么也沒有發生。
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"
}
})
uj5u.com熱心網友回復：
你需要絕對位置，你需要使用
(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; }uj5u.com熱心網友回復：
事件發生了。因此沒有任何變化。
box.style.top = boxTop - "10px"
box.style.top = boxTop "10px"
請改變它。
box.style.top = boxTop - 10 "px"
box.style.top = boxTop 10 "px"
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/327706.html
標籤：javascript dom
下一篇：不變性和記憶體使用