javascript - 在不禁用事件的情况下隐藏用户点击的元素

Question

我正在处理元素的可访问性问题。我需要隐藏此元素，以便用户无法单击/点击它但不会禁用该事件。我不想禁用它，因为如果它被禁用，画外音将无法触发事件。我正在使用下面的 css，但仍然有一个我无法摆脱的小 hitzone。

position: absolute;
left: 15px;
top: 36px;
width: 0;
height: 0;
opacity: 0;

到目前为止我尝试了什么:

• 可见性:隐藏；
• z-index: -1;
• onmousedown

它没有像我想要的那样工作:(

编辑------------

所以我尝试使用 css 并在下面添加以简单地重新定位选择元素并最大限度地减少用户点击/点击它的机会:

left: 0;
top: -36px;
z-index: 100;

所以仍然有一个命中区，但几乎不可能有人点击/点击它。画外音可以接受这一点，并且不会改变用户的任何行为。

Answer 1

如果您正在使用 Bootstrap ，您可以尝试使用类“sr-only”。

如果不是，好吧，从中“借用”样式没有坏处:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

我从this answer借来了这个样本因为我手边没有 Bootstrap 源代码，但它对我来说看起来很准确。

您可以从 Bootstrap accessibility page 中了解更多信息