Paragon512：
私は、HTMLとCSSのみ（ノーJavascriptを）で、視覚的にダイナミックでインタラクティブな体験を作成するために、自分自身に挑戦してきました。これまでのところ、私は純粋なCSSとHTMLで行うことができなかったことを必要な機能に遭遇していません。この1は、おそらく少しより困難です。
私は、ダブルクリックからユーザーを防ぐために必要がある<a>、<input type="submit">と<button>タグ。これは、フォームをダブル提出したり、誤ったURLに2つのGET要求を行うそれらを防ぐためです。どのようにこれは純粋なCSSで行うことができますか？我々が設定できない場合でもdisabledJSせず、2020年にここでそれを扱うことができるスタイルのいくつかのマスキング技術またはそれらの組み合わせがあるはずです。
ここでは試みの簡単な例です：
.clicky:focus{
display: none;
pointer-events: none;
}<a href="#down" class="clicky">test</a>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p id="down">target</p>実際のクリックイベントが何らかの理由で解雇される前に、残念ながら、これはそれを無効にします。たぶん、アンカーは、テストするための最良の方法ではありませんか？私はさらに試行していきます。
Afifに同行：
ひとつのアイデアは、第1を避けるために、最初のクリック後の要素の上に来る層を持つことです。
ここで私はの継続検討する基本的な考え方である1sあなたが低下することができる2回のクリック間が。ボタン/リンクをクリックしてください、あなたはあなただけの後に再度クリックできることがわかります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>