Почему document.activeElement дает другой результат на Mac с использованием Firefox - PullRequest
1 голос
/ 01 мая 2019

У меня есть следующий код:

document.addEventListener('submit', function(e) {
  e.preventDefault();
  console.log(document.activeElement);
});
<form action="/" type="POST">
  <label>Enter text: </label><input type="text">
  <input type="submit">
</form>

При нажатии кнопки в Linux или Windows (либо Chrome, либо Firefox) в консоли выводится <input type="submit">

Однакона Mac Firefox я получаю вывод <body>.(Chrome выдаст <input type="submit">

Почему выходные данные отличаются от версии Firefox для Mac?

1 Ответ

1 голос
/ 01 мая 2019

Это действительно звучит как ошибка, и вы правильно сделали, открыв этот билет .

Если вам абсолютно необходимо полагаться на это для своего кода, одним из способов было бы отследить себя активным элементом.

Псевдокласс :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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...