純粋なCSSで送信ボタンとリンクのオンクリックを無効にする方法は？

私は、HTMLとCSSのみ（JavaScriptなし）で視覚的に動的でインタラクティブなエクスペリエンスを作成するように挑戦しました。これまでのところ、純粋なCSSやHTMLでは実行できなかった必要な機能に出会ったことはありません。これはおそらくもう少し難しいです。

私は、ダブルクリックからユーザーを防ぐために必要がある<a>、<input type="submit">と<button>タグ。これは、フォームを二重に送信したり、誤って2つのGETリクエストをURLに送信したりするのを防ぐためです。これは純粋なCSSでどのように実行できますか？disabledJSなしでは設定できない場合でも、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

— Paragon512
ソース

フォームが最初に送信された後、フォームにクラスを与えることができますか？

— SIGSTACKFAULT

pointer-events: allデフォルトかもしれませんが、：activeまたは：focus状態ではありませんか？pointer-events: noneそれらの州の設定が好きですか？

— ジェレミーハリス

多分el:active, el:focusポインターイベントと組み合わせる

— Paragon512

これは機能しますか？：active {display：none; //例}

— MD Hesari

追加試行。クリックを発動する前にそれを無効にしました。

— Paragon512

回答:

1つのアイデアは、2番目のクリックを回避するために、最初のクリックの後に要素の上部に来るレイヤーを持つことです。

これは、1s2つのクリックの間の時間を短縮できる基本的な考え方です。ボタン/リンクをクリックしてみてください。その後、もう一度クリックすることができます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>

スニペットを展開

— テマニ・アフィフ
ソース

<a>タグが機能しないようです

— Aleksandr Belugin

@AleksandrBelugin正常に動作しています。更新を確認してください。多分あなたは何か間違ったことをしました

— Afif

それでもボタンを2回クリックできると思いますか？ボタンを2回押すのがわかります。

— Paragon512

@TemaniAfifこれを行う<a href="#" onclick="console.log('lalala')">Click me</a>と、残りのコードとリンクして、コンソールに何も記録されません。imhoリンクがクリックされないことを意味します

— Aleksandr Belugin

これをテストする最良の方法は<a>タグを使用することです。送信ボタンを使用してテストを試みましたが、ネットワークインスペクタの監視が奇妙で一貫していません。リンクをクリックしても、クリックが発生しません。ターゲットをアンカーに設定してリンクをクリックすると、リンクは無効になりますが、アンカーにジャンプしません。

— Paragon512

最初の解決策

アイデアは、radio button状態を使用:checkedして変更することです。radioサークルを非表示にし、異なるタイプのmake およびforの場合:checked、それらを非表示にして表示します。<a>pointer-events: none;buttonsdisabled

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>

スニペットを展開

2番目のソリューション

これはに適していlinksます。アイデアは、使用すること:targetです。タージ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>

スニペットを展開

— アレクサンドル・ベルギン
ソース