我有以下代码；
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输出不同？
最佳答案
这确实听起来像是个错误，您打开this ticket的操作正确。
如果您绝对需要在代码中使用它，那么可以采取的措施是跟踪自己的activeElement。:active伪类已正确设置，因此我们可以利用此伪类来跟踪activeElement。
我们可以在尝试跟踪的元素上添加非常快速的CSS过渡，然后侦听它们的transitionend事件，以便处理它们变为活动状态或停止活动的时间。可以通过在过渡结束时检查它们是否与:active伪类匹配来检查其状态。
然后，当您需要检索document.activeElement时，只需要首先检查您自己的activeElement变量是否包含某些内容，否则只能回退到浏览器报告的内容。
另外，由于此错误似乎仅影响按钮元素，因此我们只能在以下元素上添加此hack：
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>关于javascript - 为什么在使用Firefox的Mac上document.activeElement会产生不同的结果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55929696/