如何在纯CSS中禁用单击时的提交按钮和链接？

我一直挑战自己，以仅HTML和CSS（无Javascript）创建视觉上动态的交互式体验。到目前为止，我还没有遇到我在纯CSS和HTML中无法实现的任何功能。这可能有点困难。

我需要防止双击用户<a>，<input type="submit">和<button>标签。这是为了防止他们重复提交表单或意外向URL发出2个GET请求。如何在纯CSS中完成此操作？即使我们不能disabled没有JS进行设置，也应该有一些遮罩技术或样式组合可以在2020年处理。

这是一个简单的尝试示例：

.clicky:focus{
  display: none;
  pointer-events: none;
}

<a href="#down" class="clicky">test</a>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p id="down">target</p>

展开摘要

不幸的是，由于某些原因，这会在触发实际的点击事件之前将其禁用。也许锚不是最好的测试方法？我将继续作进一步的尝试。

html css

— 典范512
source

您可以在第一次提交表单后让表单自己给一个类吗？

— SIGSTACKFAULT

也许pointer-events: all是默认设置，但不是处于：active或：focus状态？喜欢pointer-events: none为那些州设定的？

— 杰里米·哈里斯

可能el:active, el:focus与指针事件结合在一起

— Paragon512

这样行吗？：active {display：none; //例如）

— MD Hesari

添加尝试。不过，它在点击之前禁用了它。

— Paragon512

Answers:

一个想法是在第一次单击后在元素的顶部放置一个图层，以避免第二次单击。

这是一个基本概念，我将考虑1s可以减少的两次单击之间的持续时间。尝试单击按钮/链接，您会发现只能在之后单击1s。

我正在添加一个小的覆盖层以便更好地了解其窍门

.button {
  position:relative;
  display:inline-block;
}
.button span{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:100%;
  z-index:-1;
  animation:overlay 1s 0s; /* Update this value to adjust the duration */
  transition:0s 2s; /* not this one! this one need to be at least equal to the above or bigger*/
}


.button *:active + span {
  animation:none;
  bottom:0;
  transition:0s 0s;
}

@keyframes overlay {
  0%,100% {
    z-index:999;
    background:rgba(255,0,0,0.2); /* To illustrate */
  }
}

<div class="button">
  <button>Click me</button>
  <span></span>
</div>

<div class="button">
  <a href="#" onclick="console.log('clicked !')">Click me</a>
  <span></span>
</div>

展开摘要

— Temani Afif
source

似乎不工作<a>标签

— 亚历山大Belugin

@AleksandrBelugin工作正常，请检查更新。也许您做错了什么

— Temani Afif

我认为它仍然可以让我单击按钮两次？我可以看到按钮第二次按下。

— Paragon512

@TemaniAfif当我执行此操作<a href="#" onclick="console.log('lalala')">Click me</a>以与其余代码链接时，没有任何日志记录到控制台。恕我直言，这意味着未单击链接

— Aleksandr Belugin

似乎最好的测试方法是使用<a>标签。我尝试使用提交按钮进行测试，但是监视网络检查器很奇怪且前后不一致。当我点击链接时，它不会触发点击。如果将目标设置为锚点并单击链接，它将禁用链接，但不会跳转到锚点。

— Paragon512

第一个解决方案

这个想法是利用radio button状态:checked来进行修改。我们隐藏radio圈，当:checked用于<a>化妆pointer-events: none;和buttons不同类型，我们隐藏和显示disabled的。

div {
  margin: 10px;
}

#radio0, .my-checkbox {
  position: absolute;
  height: 0;
  width: 0;
  opacity: 0;
}

#radio0 + a label {
  cursor: pointer;
}

#radio0:checked+a {
  pointer-events: none;
}

.btn-one,
.btn-two {
  padding: 0;
}

.btn-one>label,
.btn-two>label {
  padding: 1px 6px;
}

.my-checkbox:checked+.btn-one {
  display: none;
}

.btn-two {
  display: none;
}

.my-checkbox:checked+.btn-one+.btn-two {
  display: inline-block;
}

<div>
  <input id="radio0" type="radio" onclick="console.log('radio0 clicked!')">
  <a href="#">
    <label for="radio0">
        Click the link!
      </label>
  </a>
</div>

<div>
  <input type="radio" id="radio1" class="my-checkbox">
  <button type="button" class="btn-one" onclick="console.log('radio1 clicked!')">
      <label for="radio1">Click the button!</label>
    </button>
  <button type="button" class="btn-two" onclick="console.log('radio1 NOT clicked!')" disabled>
        <label for="radio1">Click the button!</label>
      </button>
</div>

<div>
  <input type="radio" id="radio2" class="my-checkbox">
  <button type="submit" class="btn-one" onclick="console.log('radio2 clicked!')">
    <label for="radio2">Submit!</label>
  </button>
  <button type="submit" class="btn-two" onclick="console.log('radio2 NOT clicked!')" disabled>
      <label for="radio2">Submit!</label>
    </button>
</div>

展开摘要

第二种解决方案

这很适合links。这个想法是用:target。Targe element首先被隐藏。然后，当被针对性地使用:target到pointer-events: none;的<a>。

显示代码段

#anchor {
  display: none;
}

#anchor:target {
  display: block;
}

#anchor:target+a {
  pointer-events: none;
}

<div>
  <span id="anchor"></span>
  <a href="#anchor" onclick="console.log('anchor clicked!')">Click the link!</a>
</div>

展开摘要

— 亚历山大·贝鲁金（Aleksandr Belugin）
source