Saf CSS'de tıklamayla gönder düğmesini ve bağlantıları nasıl devre dışı bırakabilirim?

Yalnızca HTML ve CSS'de (Javascript yok) görsel olarak dinamik ve etkileşimli bir deneyim yaratmaya kendimi meydan okudum. Şimdiye kadar, saf CSS ve HTML'de yapamayacağım herhangi bir özelliğe rastlamadım. Bu belki biraz daha zor.

Ben çift tıklayarak kullanıcıyı engellemek gerekir <a>, <input type="submit">ve <button>etiketleri. Bu, bir formu iki kez göndermelerini veya yanlışlıkla bir URL'ye 2 GET isteği yapmalarını önlemek içindir. Bu saf CSS'de nasıl yapılabilir? disabledJS olmadan ayarlayamasak bile , 2020'de burada işleyebilecek bazı maskeleme tekniği veya stil kombinasyonu olmalıdır.

İşte basit bir girişim örneği:

.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>

Snippet'i genişlet

Ne yazık ki, bu, gerçek tıklama olayı herhangi bir nedenle tetiklenmeden önce devre dışı bırakılır. Belki çapalar test etmenin en iyi yolu değildir? Daha fazla girişimde bulunmaya devam edeceğim.

html css

— Paragon512
kaynak

formun ilk kez gönderildikten sonra kendisine bir sınıf vermesini sağlayabilir misiniz?

— SIGSTACKFAULT

Belki pointer-events: allvarsayılan olarak, ancak: aktif veya: odak durumlarında değil mi? pointer-events: noneBu eyaletler için ayarlanmış gibi mi?

— Jeremy Harris

belki el:active, el:focuspointer olayları ile kombine

— Paragon512

Bu çalışıyor mu? : active {display: none; // örneğin}

— MD Hesari

Deneme eklendi. Yine de tıklamayı tetiklemeden önce devre dışı bıraktı.

— Paragon512

Yanıtlar:

Bir fikir, ikinci tıklamayı önlemek için ilk tıklamanın ardından öğenin üstüne gelen bir katmana sahip olmaktır.

Burada, 1sazaltabileceğiniz iki tıklama arasındaki bir süreyi dikkate alacağım temel bir fikir . Düğmeyi / bağlantıyı tıklamayı deneyin, ancak daha sonra tekrar tıklayabileceğinizi göreceksiniz 1s.

Hile daha iyi görmek için küçük bir kaplama ekliyorum

.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>

Snippet'i genişlet

— Temani Afif
kaynak

<a>etiketi ile çalışmıyor gibi görünüyor

— Aleksandr Belugin

@AleksandrBelugin iyi çalışıyor, güncellemeyi kontrol edin. Belki yanlış bir şey yaptınız

— Temani Afif

Sanırım hala düğmeyi 2 kez tıklamama izin veriyor? Düğmenin ikinci kez basıldığını görebiliyorum.

— Paragon512

@TemaniAfif Ben <a href="#" onclick="console.log('lalala')">Click me</a>kodun geri kalanı ile bağlantı yapmak için yaptığımda hiçbir şey konsol günlüğe kaydeder.

— imho

Bu <a>etiketi test etmenin en iyi yolu gibi görünüyor . Gönder düğmeleriyle test etmeyi denedim, ancak ağ denetçisini izlemek garip ve tutarsız. Bağlantıyı tıkladığımda, tıklamayı tetiklemiyor. Bir bağlantıya hedef ayarlar ve bağlantıyı tıklatırsanız bağlantı devre dışı bırakılır ancak bağlantıya atlanmaz.

— Paragon512

İlk çözüm

Fikir, değişiklik yapmak için radio buttondurumu kullanarak kullanmaktır :checked. Biz gizlemek radiodaire ve ne zaman :checkediçin <a>marka pointer-events: none;ve için buttonsbiz bunları gizlemek ve göstermek farklı türde disabledolanları.

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>

Snippet'i genişlet

İkinci çözüm

Bu uygun links. Fikir kullanmaktır :target. elementÖncelikle Targe gizlidir. Sonra kullanımını hedeflendiği zaman :targetiçin pointer-events: none;bir <a>.

Kod snippet'ini göster

#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>

Snippet'i genişlet

— Aleksandr Belugin
kaynak