时间戳

首页 > 解决方案 > 为什么在按钮上按 Enter 不会导致：Chrome 中的活动状态？

html - 为什么在按钮上按 Enter 不会导致：Chrome 中的活动状态？

问题描述

检查当前 Chrome (80) 中的以下代码段：

foo.addEventListener('click', () => {
  console.log('button activated');
})
button:active {
  background-color: yellow;
}
<button type="button" id="foo">Activate me using Click, Enter, Space</button>

Chrome 在单击（右或左）按钮或使用 激活button:active按钮时应用样式，但在使用 激活时不应用。Space Enter

Firefox 仅在单击（仅鼠标左键）按钮button:active时应用样式。

有人知道吗

  1. 这应该如何工作，以及
  2. button:active无论使用哪种激活方法，如何让按钮显示？

我非常喜欢基于 CSS 的解决方案。使用关键侦听器添加/删除类将是一个非常丑陋的解决方案，并且不在此问题的范围内。

编辑

必须有，或者至少应该有一种标准的方式，让用户使用Enter他们的动作的视觉反馈来激活一个按钮。这种行为没有在某处指定吗？如果是这样，我可以在 Mozilla 错误跟踪器和 Chromium 问题跟踪器上将其作为问题提出。

标签： htmlcsspseudo-class

解决方案

该规范似乎对此非常清楚：

:active伪类在用户激活元素时应用。例如，在用户按下鼠标按钮并释放它的时间之间。在具有多个鼠标按钮的系统上，:active仅适用于主要或主要激活按钮（通常是“左”鼠标按钮）及其任何别名。

https://drafts.c​​sswg.org/selectors-3/#sel-active

所以它没有明确提到使用键盘激活一个元素，但它确实说明了

[...]当一个元素被用户激活时[...]

由于用户在发出or时显然会激活一个按钮，因此 Firefox 和 Chrome 似乎都明显违反了此处的规范。EnterSpace

最重要的是，Chrome在右键单击:active按钮时也适用（规范中明确说明不应如此）。

将在 CSSWG 跟踪器中提出问题，以使规范的这一部分更加明确。这是：https ://github.com/w3c/csswg-drafts/issues/4787

推荐阅读