Это действительно звучит как ошибка, и вы правильно сделали, открыв этот билет .
Если вам абсолютно необходимо полагаться на это для своего кода, одним из способов было бы отследить себя активным элементом.
Псевдокласс :active
установлен правильно, поэтому мы можем использовать его для отслеживания себя из activeElement.
Мы можем добавить действительно быстрый CSS-переход к элементам, которые мы пытаемся отслеживать, и затем прослушивать их transitionend
события, чтобы обрабатывать, когда они становятся или перестают быть активными. Их состояние можно проверить, проверяя, соответствуют ли они псевдоклассу :active
в момент завершения перехода.
Затем, когда вам нужно будет получить document.activeElement
, вам просто нужно сначала проверить, содержит ли что-то ваша собственная переменная activeElement
, и только в противном случае отступить на сообщаемую браузером переменную.
Кроме того, поскольку эта ошибка, по-видимому, затрагивает только кнопки Elements, мы можем добавить этот хак только для следующих элементов:
let activeElement;
document.addEventListener('transitionend', function(e) {
// if the target is currently active, it is the activeElement
activeElement = e.target.matches(':active') ? e.target : null;
});
document.addEventListener('submit', function(e) {
e.preventDefault();
// first try to get our own activeElement
// otherwise default to the document's one
console.log('in submit', activeElement || document.activeElement);
});
// to show the default one still works
document.addEventListener('click', function(e) {
console.log('in click', activeElement || document.activeElement);
});
input,button { /* target only buttons UIs */
transition: opacity 0.000001s; /* a really fast transition */
}
input:active,button:active {
opacity: 0.999; /* a property barely noticeable */
}
<form action="/" type="POST">
<label>Enter text: </label><input type="text">
<button type="submit" tabindex="0">submit</button>
</form>
<a href="#">click me</a>