Làm cách nào để tắt nút gửi và liên kết khi nhấp trong CSS thuần?

Tôi đã thử thách bản thân để tạo ra trải nghiệm trực quan và tương tác trực quan chỉ bằng HTML và CSS (Không có Javascript). Cho đến nay, tôi chưa bắt gặp bất kỳ tính năng nào tôi cần mà tôi không thể làm trong CSS và HTML thuần túy. Điều này có lẽ là một chút khó khăn hơn.

Tôi cần phải ngăn chặn người dùng kích đúp <a>, <input type="submit">và <button>thẻ. Điều này là để ngăn họ gửi hai biểu mẫu hoặc vô tình thực hiện 2 yêu cầu NHẬN vào một URL. Làm thế nào điều này có thể được thực hiện trong CSS thuần? Ngay cả khi chúng ta không thể thiết lập disabledmà không có JS, vẫn cần có một số kỹ thuật che giấu hoặc kết hợp các kiểu có thể xử lý nó ở đây vào năm 2020.

Đây là một ví dụ đơn giản về một nỗ lực:

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

Mở rộng đoạn trích

Thật không may, điều này vô hiệu hóa nó trước khi sự kiện nhấp thực tế được kích hoạt vì một số lý do. Có lẽ neo không phải là cách tốt nhất để kiểm tra? Tôi sẽ tiếp tục cố gắng hơn nữa.

html css

— Paragon512
nguồn

bạn có thể làm cho biểu mẫu tự cung cấp cho mình một lớp sau khi nó được gửi lần đầu tiên không?

— SIGSTACKFAULT

Có thể pointer-events: alltheo mặc định, nhưng không ở trạng thái: đang hoạt động hoặc: tập trung? Giống như thiết lập pointer-events: nonecho các tiểu bang?

— Jeremy Harris

có thể el:active, el:focuskết hợp với các sự kiện con trỏ

— Paragon512

Nó có hoạt động không? : kích hoạt {hiển thị: không có; // ví dụ}

— MD Hesari

Đã thêm nỗ lực. Nó vô hiệu hóa nó trước khi bắn nhấp chuột mặc dù.

— Paragon512

Câu trả lời:

Một ý tưởng là có một lớp xuất hiện trên đỉnh của phần tử sau lần nhấp đầu tiên để tránh lớp thứ hai.

Đây là một ý tưởng cơ bản nơi tôi sẽ xem xét thời lượng 1sgiữa hai lần nhấp mà bạn có thể giảm. Hãy thử nhấp vào nút / liên kết và bạn sẽ nhận thấy rằng bạn chỉ có thể nhấp lại sau đó 1s.

Tôi đang thêm một lớp phủ nhỏ để thấy rõ hơn mẹo

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

Mở rộng đoạn trích

— Temani Afif
nguồn

có vẻ như không hoạt động với <a>thẻ

— Aleksandr Belugin

@AleksandrBelugin nó hoạt động tốt, kiểm tra cập nhật. Có lẽ bạn đã làm sai điều gì đó

— Temani Afif

Tôi nghĩ nó vẫn cho tôi bấm nút 2 lần? Tôi có thể thấy nút ấn lần thứ hai.

— Paragon512

@TemaniAfif khi tôi làm điều này <a href="#" onclick="console.log('lalala')">Click me</a>để liên kết với phần còn lại của mã không có gì đăng nhập vào bảng điều khiển. imho nó có nghĩa là liên kết không được nhấp vào

— Alexanderr Belugin

Có vẻ như cách tốt nhất để kiểm tra điều này là với <a>thẻ. Tôi đã thử kiểm tra với các nút gửi nhưng giám sát thanh tra mạng là lạ và không nhất quán. Khi tôi nhấp vào liên kết, nó không kích hoạt nhấp chuột. Nếu bạn đặt mục tiêu thành một neo và nhấp vào liên kết, nó sẽ vô hiệu hóa liên kết nhưng sẽ không nhảy đến neo.

— Paragon512

Giải pháp đầu tiên

Ý tưởng là sử dụng radio buttontrạng thái bằng cách :checkedsửa đổi. Chúng tôi giấu radiovòng tròn và khi :checkedcho <a>làm pointer-events: none;và buttonsvới các loại khác nhau, chúng tôi ẩn chúng và hiển thị disablednhững người thân.

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>

Mở rộng đoạn trích

Giải pháp thứ hai

Điều này phù hợp với links. Ý tưởng là sử dụng :target. Tund elementđược ẩn trước hết. Sau đó, khi được nhắm mục tiêu sử dụng :targetđể pointer-events: none;của <a>.

Hiển thị đoạn mã

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

Mở rộng đoạn trích

— Alexanderr Belugin
nguồn