JS如何处理键盘事件

Question

我的任务是分别在按下向上和向下箭头键时增加和减小“气球”的大小。 我已将其设置为

HTML 中的标签，当按下这些键时，它必须将字体大小设置为更大或更小 10%。 然而它不起作用。 大小保持不变。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event tasks</title>
</head>
<body>
    <p style="font-size: 24px;">🎈</p>
    <button id="temp">Temp</button>
    <script src="tasks.js"></script>
</body>
</html>

JS：

const balloon = document.querySelector('p');
const defaultSize = balloon.style.fontSize;
balloon.addEventListener('keydown', event => {
    let size = balloon.style.fontSize;
    if (event.key == 'ArrowUp') {
        /*size += 0.1 * size;
        balloon.style.fontSize = size + 'px';*/
        setSize(size * 1.1);
        event.preventDefault();
    }
    else if (event.key == 'ArrowDown') {
        while (size > defaultSize) {
            /*size -= 0.1 * size;
            balloon.style.fontSize = size + 'px';*/
            setSize(size * 0.9);
            event.preventDefault();
        }
    }
});

function setSize(newSize) {
    size = newSize;
    balloon.style.fontSize = size + "px";
}

document.getElementById('temp').addEventListener('click', () => {
    setSize(40);
});

我为包含气球符号和起始大小的 p 元素设置了一个常数，以在减小其大小时使用，因此它不能 go 超过一定大小。 接下来只是监听事件，如果键是 ArrowUp（我尝试使用 Arrow Up 的编号，但它也不起作用）然后增加大小，或者如果它是 ArrowDown，则减小大小。 我还覆盖了默认行为，因为我不确定它是什么。 setSize function 是临时的，就像按钮一样，看看是我没有正确编写大小增加程序还是有其他问题。

Answer 1

像这样尝试（首先单击片段内部，使其具有焦点）：

 const balloon = document.querySelector('p'); const defaultSize = parseFloat(balloon.style.fontSize); let size = defaultSize; window.addEventListener('keydown', event => { if (event.key == 'ArrowUp') { /*size += 0.1 * size; balloon.style.fontSize = size + 'px';*/ setSize(size * 1.1); event.preventDefault(); } else if (event.key == 'ArrowDown') { if (size > defaultSize) { /*size -= 0.1 * size; balloon.style.fontSize = size + 'px';*/ setSize(size * 0.9); event.preventDefault(); } } }); function setSize(newSize) { size = newSize; balloon.style.fontSize = size + "px"; } document.getElementById('temp').addEventListener('click', () => { setSize(40); });

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Event tasks</title> </head> <body> <p style="font-size; 24px."></p> <button id="temp">Temp</button> <script src="tasks.js"></script> </body> </html>

变化：

size是在事件处理程序之外定义的，因此当前大小是已知的
defaultSize和size是数字（而不是例如'24px' ）
事件处理程序附加到window以便keydown事件注册
对于'ArrowDown' ，使用if条件而不是while循环检查大小。

Answer 2

您的代码中有两个问题：

第一：你得到的大小将得到“24px”而不是“24”所以你不能做 *1.1 甚至将它设置为balloon.style.fontSize

因为它看起来像

balloon.style.fontSize="24pxpx"

第二：您的 EventListener 设置为错误的 position 您应该将其设置在 Window 上以聆听您的点击，例如window.addEventListener

这是我的简单演示https://codepen.io/chawol/pen/jOMZbgv

请原谅我英语不好

JS如何处理键盘事件

问题描述

2 个解决方案

解决方案1
0 2020-12-30 09:39:04

解决方案2
0 2020-12-30 09:44:29

JS如何处理键盘事件

问题描述

2 个解决方案

解决方案1 0 2020-12-30 09:39:04

解决方案2 0 2020-12-30 09:44:29

解决方案1
0 2020-12-30 09:39:04

解决方案2
0 2020-12-30 09:44:29