为什么点击超文本标记语言按钮后，我的JavaScript中的"keypress“同时表现为"keypress”和"keyup“？
为什么点击超文本标记语言按钮后，我的JavaScript中的"keypress“同时表现为"keypress”和"keyup“？
提问于 2020-03-16 13:21:53
所以我试着用html、css和JS做一个基本的“随机颜色生成器”，所有这些我都是新手。我希望允许用户在页面上的任何位置单击按钮以生成随机颜色，或按空格键以生成随机颜色。首先按空格键很好，只要按钮还没有被点击，但是在按钮被点击后，当用户试图再次按空格键时，空格键的作用就像是同时按键和快捷键？这意味着在按下时生成一种颜色，然后在释放键时生成完全不同的颜色。这是我的JS代码：
const hexNumbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
const hexBtn = document.querySelector(".hexBtn");
const bodyBcg = document.querySelector("body");
const hex = document.querySelector(".hex");
bodyBcg.addEventListener('keypress', getHex);
hexBtn.addEventListener('click', getHexClick);
function getHex(e) {
if (e.key !== ' ')
return;
colorGenerator();
}
function getHexClick() {
colorGenerator();
}
function colorGenerator() {
let hexColor = "#";
for (let i = 0; i <= 5; i++) {
let random = Math.floor(Math.random() * hexNumbers.length);
hexColor += hexNumbers[random];
}
bodyBcg.style.backgroundColor = hexColor;
hex.innerHTML = hexColor;
}附言:我想让用户在按下空格键的同时发出颜色，所以仅仅把bodyBcg.addEventListener('keypress', getHex);改成bodyBcg.addEventListener('keyup', getHex);不是我想要的。任何帮助都是非常感谢的。
这是我的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Color Generator</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<div class="container">
<h2 class="hexColor">
this hex color code is : <span class="hex"></span>
</h2>
<button type="button" class="hexBtn">Press here to change color</button>
</div>
<script src="./script.js"></script>
</body>
</html>回答 3
Stack Overflow用户
发布于 2020-03-16 13:40:57
当您单击按钮元素时，按钮将获得焦点。空格键的默认操作是“单击”焦点元素以触发其操作，就像连接到按钮上的单击侦听器一样。
您可以通过在按空格键时以编程方式模糊按钮来修复代码。
function getHex(e) {
if (e.key !== ' ')
return;
hexBtn.blur();
colorGenerator();
}Stack Overflow用户
发布于 2020-03-16 14:36:09
这不是js的问题。这是HTML按钮的默认行为，一旦您单击该按钮，它将保持焦点。所以，当你按下空格键的时候，它也会点击这个按钮。
您只需向按钮标记添加一个属性: onclick="this.blur();“
<button type="button" onclick="this.blur();" class="hexBtn">Press here to change color</button>Stack Overflow用户
发布于 2020-03-16 14:01:12
将您的getHex方法更改为以下(我使用了jQuery)并尝试，
function getHex(e) {
if (e.key !== ' ' || $(e.target).text() == 'Click')
return;
colorGenerator();
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60700708
复制相关文章
相似问题
腾讯云开发者
