Як відключити натискання кнопки та посилань при натисканні в чистому CSS?

Я поставив перед собою завдання створити візуально динамічний та інтерактивний досвід лише у HTML та CSS (Без Javascript). Поки що я не натрапив на будь-яку потрібну мені функцію, яку не міг зробити в чистому CSS та HTML. Це, мабуть, трохи складніше.

Мені потрібно , щоб користувач з подвійного клацання <a>, <input type="submit">і <button>тегів. Це запобігає подвійному надсиланню форми або випадковому внесенню 2 GET-запитів на URL. Як це можна зробити в чистому 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
джерело

чи можете ви змусити форму давати собі клас після того, як вона була подана вперше?

— SIGSTACKFAULT

Можливо, pointer-events: allза замовчуванням, але не в станах: active або: focus? Як встановлено pointer-events: noneдля цих штатів?

— Джеремі Гарріс

можливо el:active, el:focusпоєднується з вказівниками події

— Paragon512

Це працює? : активний {дисплей: немає; // наприклад}

— MD Hesari

Додана спроба. Однак він відключив його, перш ніж запускати клацання.

— Paragon512

Відповіді:

Одна з ідей полягає в тому, щоб після першого клацання шар, який потрапляє на верхню частину елемента, мав шар, щоб уникнути другого.

Ось основна ідея, де я буду розглядати тривалість 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>

Розгорніть фрагмент

— Темані Афіф
джерело

здається, не працює з <a>тегом

— Олександр Белугін

@AleksandrBelugin це працює добре, перевірте оновлення. Можливо, ви зробили щось не так

— Темані Афіф

Я думаю, це все ж дозволить мені натиснути кнопку 2 рази? Я бачу кнопку натискання вдруге.

— Paragon512

@TemaniAfif, коли я це роблю, <a href="#" onclick="console.log('lalala')">Click me</a>щоб зв’язати з рештою коду, нічого не записує до консолі. imho це означає, що посилання не натиснуто

— Олександр Белугін

Схоже, найкращий спосіб перевірити це за допомогою <a>тега. Я спробував тестувати кнопки подання, але моніторинг мережевого інспектора дивно та непослідовно. Коли я натискаю посилання, воно не спрацьовує. Якщо встановити ціль на якір і натиснути посилання, воно відключить посилання, але не перескочить на якір.

— Paragon512

Перше рішення

Ідея полягає у використанні radio buttonстану шляхом :checkedвнесення змін. Ми ховаємо radioколо, і коли :checkedдля <a>make pointer-events: none;і for 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. Ціль 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>

Розгорніть фрагмент

— Олександр Белугін
джерело