Я поставил перед собой задачу создать визуально динамичный и интерактивный опыт только в 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> </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>
К сожалению, это отключает его до того, как по какой-то причине произойдет фактическое событие нажатия. Может быть, якоря не лучший способ проверить? Я буду продолжать делать дальнейшие попытки.
pointer-events: all
по умолчанию, но не в состояниях: active или: focus? Как установить pointer-events: none
для этих государств?
el:active, el:focus
сочетании с указателями-событиями