Je me suis mis au défi de créer une expérience visuellement dynamique et interactive en HTML et CSS uniquement (sans Javascript). Jusqu'à présent, je n'ai rencontré aucune fonctionnalité dont j'avais besoin que je ne pouvais pas faire en CSS et HTML pur. Celui-ci est peut-être un peu plus difficile.
Je dois empêcher l'utilisateur d' un double-clic <a>
, <input type="submit">
et les <button>
tags. C'est pour les empêcher de soumettre deux fois un formulaire ou de faire accidentellement 2 requêtes GET à une URL. Comment cela peut-il être fait en CSS pur? Même si nous ne pouvons pas définir disabled
sans JS, il devrait y avoir une technique de masquage ou une combinaison de styles qui peuvent le gérer ici en 2020.
Voici un exemple simple d'une tentative:
.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>
Malheureusement, cela le désactive avant que l'événement de clic réel ne soit déclenché pour une raison quelconque. Peut-être que les ancres ne sont pas la meilleure façon de tester? Je continuerai de faire de nouvelles tentatives.
pointer-events: all
par défaut, mais pas dans les états: actif ou: focus? Comme défini pointer-events: none
pour ces États?
el:active, el:focus
combiné avec des événements de pointeur