在 Firefox 中单击按钮的伪元素不会触发单击

Question

正如标题所示，在 Firefox 中单击按钮的伪元素不会触发我的点击。

此外，伪元素下方的文本和元素仍然是交互的。在这里看小提琴：

https://jsfiddle.net/15bmz7zg/1/

我使用的是 Firefox 58.0.1 - Mac。在 Chrome 和 Safari 上测试小提琴，一切都按预期工作。准备提交错误报告，但我想先看看其他人是否同意：这是一个错误，对吗？

2018 年 7 月 19 日更新 建议的副本不能解决这个问题。我已经提交了一份 Firefox 错误报告，并且该错误得到了确认。我将添加一个反映这一点的答案。

document.querySelector('button').addEventListener('click', function(){
	document.querySelector('button').classList.toggle('overlay')
})

button.overlay::after{
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(128,128,128,.5);
}

<h2>
I shouldn't be able to select this text when overlay is active.
</h2>
<p>
And, clicking the overlay should trigger button click.
</p>
<button>
toggle overlay
</button>

Answer 1

这是 Firefox 中的一个已知错误，我的错误报告证实了这一点：https://bugzilla.mozilla.org/show_bug.cgi?id=1435331 ...被标记为此错误的副本：https://bugzilla.mozilla.org/show_bug.cgi?id=1089326

这个错误已经有 4 年的历史了，但显然现在正在处理中。

Answer 2

您可以将叠加层设置为非伪元素

document.querySelector('button').addEventListener('click', function(){
	document.querySelector('.overlay-wrap').classList.add('showed')
});
document.querySelector('.overlay-wrap').addEventListener('click', function(){
	this.classList.remove('showed')
});

.overlay-wrap {
  display: none;
}
.overlay-wrap.showed{
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(128,128,128,.5);
  display: block;
  z-index: 9999;
}

<h2>
I shouldn't be able to select this text when overlay is active.
</h2>
<p>
And, clicking the overlay should trigger button click.
</p>
<button>
toggle overlay

</button>
<span class="overlay-wrap"></span>