Question

我有以下代码；

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">

为什么Mac版本的Firefox的输出不同？

Answer 1

这听起来确实像是个错误，您打开this ticket做的正确。

如果您的代码绝对需要依赖于此，那么一个破解方法就是跟踪自己的activeElement。

正确设置了:active伪类，因此我们可以利用此伪类来跟踪activeElement。

我们可以在要跟踪的元素上添加非常快速的CSS过渡，然后侦听其transitionend事件，以便处理它们变为活动状态或停止活动的时间。可以通过在过渡结束时检查它们是否与:active伪类相匹配来检查其状态。

然后，当您需要检索document.activeElement时，您只需要首先检查您自己的activeElement变量是否包含某些内容，就可以回退到浏览器报告的内容中。

此外，由于此错误似乎仅影响按钮元素，因此我们只能在以下元素上添加此技巧：

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>

为什么在使用Firefox的Mac上document.activeElement会产生不同的结果

1 个答案: