Hướng dẫn how to make button click only once in javascript - cách làm cho nút chỉ nhấp một lần trong javascript

Chào mừng bạn đến với hướng dẫn của người mới bắt đầu về cách chỉ cho phép một lần nhấp trong JavaScript. Vì vậy, bạn có một nút hoặc yếu tố nói rằng Nhấp vào đây để làm một cái gì đó, nhưng muốn ngăn người dùng nhấp vào nó nhiều lần.

Có một số cách để chỉ cho phép một cú nhấp chuột trong JavaScript:

1. Tắt nút sau khi nhấp vào nó.
2. Sử dụng cờ Boolean để chỉ ra một lần nữa, quy trình, don don một lần nữa nếu cờ này là đúng.
3. Xóa thuộc tính trên nhấp chuột khỏi nút sau khi nhấp vào một lần.
4. Đính kèm một trình nghe sự kiện đang nhấp chuột và tách nó ra sau khi nhấp một lần.
5. Phương pháp Unorthodox-Thay đổi chức năng trên nhấp chuột sau khi nhấp vào một lần.

Vì vậy, làm thế nào để chúng ta làm tất cả những điều này? Hãy để chúng tôi đi qua một số ví dụ thực tế - đọc tiếp để tìm hiểu!

Tôi đã bao gồm một tệp zip với tất cả các mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không phải sao chép mọi thứ, hoặc nếu bạn chỉ muốn đi thẳng vào.

Slide nhanh

MỤC LỤC

Tải xuống & ghi chú

Thứ nhất, đây là liên kết tải xuống đến mã ví dụ như đã hứa.

Ghi chú nhanh

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới, nếu bạn cần câu trả lời khẩn cấp, vui lòng kiểm tra danh sách các trang web của tôi để nhận trợ giúp lập trình.

Mã hóa ví dụ Tải xuống

Nhấn vào đây để tải xuống mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên đó hoặc sử dụng nó trong dự án của riêng bạn.

Bảo vệ một lần nhấp

Với điều đó, bây giờ chúng ta hãy di chuyển vào các cơ chế mà chúng ta có thể đặt vào vị trí để bảo vệ một cú nhấp chuột.

1) Vô hiệu hóa nút

1-disable.html

<script>
function doSomething () {
  // (A) DISABLE THE BUTTON
  document.getElementById("myButton").disabled = true;

  // (B) DO YOUR PROCESSING HERE
  alert("Something is done!");

  // (C) RE-ENABLE AFTER PROCESSING IF YOU WANT
  // document.getElementById("myButton").disabled = false;
}
</script>
 
<!-- (D) HTML BUTTON -->
<input type="button" id="myButton" onclick="doSomething()"
       value="Click Here To Do Something"/>

Nó đơn giản như vậy, chúng tôi đã vô hiệu hóa nút bằng thủ công với

<button id="pizzaButton" onClick="yumpizza();" style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>

<script>
  var strength = Math.floor(Math.random() * 20 + 1);
  function yumpizza() {
    document.getElementById("pizza").innerHTML = ("Strength:" + strength);
    document.getElementById("pizzaButton").onclick = null;
  }
</script>

• <button id="pizzaButton" onClick="yumpizza();" style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>
  
  <script>
    var strength = Math.floor(Math.random() * 20 + 1);
    function yumpizza() {
      document.getElementById("pizza").innerHTML = ("Strength:" + strength);
      document.getElementById("pizzaButton").onclick = null;
    }
  </script>
  

  2

• <button id="pizzaButton" onClick="yumpizza();" style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>
  
  <script>
    var strength = Math.floor(Math.random() * 20 + 1);
    function yumpizza() {
      document.getElementById("pizza").innerHTML = ("Strength:" + strength);
      document.getElementById("pizzaButton").onclick = null;
    }
  </script>
  

  3

• <button id="pizzaButton" onClick="yumpizza();" style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>
  
  <script>
    var strength = Math.floor(Math.random() * 20 + 1);
    function yumpizza() {
      document.getElementById("pizza").innerHTML = ("Strength:" + strength);
      document.getElementById("pizzaButton").onclick = null;
    }
  </script>
  

  4

2) Cờ bảo vệ

2-flag.html

<script>
// (A) FLAG FOR "ALREADY CLICKED".
var clicked = false;
 
// (B) FUNCTION - WILL ONLY RUN IF NOT CLICKED
function doSomething () { if (!clicked) {
  // (B1) SET CLICKED TO TRUE
  clicked = true;
 
  // (B2) DO YOUR PROCESSING HERE
  alert("Something is done!");
 
  // (B3) RE-ENABLE AFTER PROCESSING IF YOU WANT
  // clicked = false;
}}
</script>
 
<!-- (C) HTML ELEMENT -->
<div onclick="doSomething()">
  Click Here To Do Something
</div>

Vậy nếu chúng ta không làm việc với các nút thì sao? Đây là một trong những cơ chế có thể:

• Đầu tiên, chúng tôi tạo ra một lá cờ bảo vệ của người Viking

  <button id="pizzaButton" onClick="yumpizza();" style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>
  
  <script>
    var strength = Math.floor(Math.random() * 20 + 1);
    function yumpizza() {
      document.getElementById("pizza").innerHTML = ("Strength:" + strength);
      document.getElementById("pizzaButton").onclick = null;
    }
  </script>
  

  5.
• Sau đó, trong chức năng xử lý

  <button id="pizzaButton" onClick="yumpizza();" style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>
  
  <script>
    var strength = Math.floor(Math.random() * 20 + 1);
    function yumpizza() {
      document.getElementById("pizza").innerHTML = ("Strength:" + strength);
      document.getElementById("pizzaButton").onclick = null;
    }
  </script>
  

  0 của chúng tôi, chúng tôi sẽ chỉ tiến hành

  <button id="pizzaButton" onClick="yumpizza();" style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>
  
  <script>
    var strength = Math.floor(Math.random() * 20 + 1);
    function yumpizza() {
      document.getElementById("pizza").innerHTML = ("Strength:" + strength);
      document.getElementById("pizzaButton").onclick = null;
    }
  </script>
  

  7.
• Nên là đội trưởng rõ ràng ngay bây giờ - chúng tôi sẽ đặt

  <button id="pizzaButton" onClick="yumpizza();" style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>
  
  <script>
    var strength = Math.floor(Math.random() * 20 + 1);
    function yumpizza() {
      document.getElementById("pizza").innerHTML = ("Strength:" + strength);
      document.getElementById("pizzaButton").onclick = null;
    }
  </script>
  

  8 để ngăn chặn các nhấp chuột tiếp theo không xử lý.

3) Xóa thuộc tính trên nhấp chuột

3-remove-onclick.html

<script>
function doSomething () {
  // (A) REMOVE ONCLICK
  var element = document.getElementById("myDiv");
  element.onclick = "";

  // (B) DO YOUR PROCESSING HERE
  alert("Something is done!");

  // (C) RE-ENABLE AFTER PROCESSING IF YOU WANT
  // element.onclick = doSomething;
}
</script>
 
<!-- (D) HTML ELEMENT -->
<div id="myDiv" onclick="doSomething()">
  Click Here To Do Something
</div>

Trên đây thực sự không phải là phương pháp chính thống được ưa thích, thì phương pháp này là. Chúng tôi chỉ cần loại bỏ

<button id="pizzaButton" onClick="yumpizza();" style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>

<script>
  var strength = Math.floor(Math.random() * 20 + 1);
  function yumpizza() {
    document.getElementById("pizza").innerHTML = ("Strength:" + strength);
    document.getElementById("pizzaButton").onclick = null;
  }
</script>

document.getElementById("pizzaButton").disabled = true;

4) Đính kèm và tách người nghe sự kiệnATTACH & DETACH EVENT LISTENER

4-event.html

<script>
// (A) ATTACH CLICK LISTENER ON PAGE LOAD
window.addEventListener("load", () => {
  document.getElementById("myDiv").addEventListener("click", doSomething);
});
 
// (B) THE USUAL FUNCTION
function doSomething () {
  // (B1) DETACH CLICK LISTENER
  var div = document.getElementById("myDiv");
  div.removeEventListener("click", doSomething);
 
  // (B2) EXTRA - CHANGE THE TEXT IF YOU WANT
  div.innerHTML = "You clicked";
 
  // (B3) DO YOUR PROCESSING HERE
  alert("Something is done!");
 
  // (B4) RE-ENABLE AFTER PROCESSING IF YOU WANT
  // div.addEventListener("click", doSomething);
}
</script>
 
<!-- (C) HTML ELEMENT -->
<!-- NOTE : NO ONCLICK, ASSIGNED WITH JAVASCRIPT -->
<div id="myDiv">
  Click Here To Do Something
</div>

Bây giờ, cái này dường như có vẻ dài hơn một chút, nhưng nó sẽ có ý nghĩa về lâu dài khi bạn tìm hiểu thêm về sự khác biệt giữa addEventListener và

<button id="pizzaButton" onClick="yumpizza();" style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>

<script>
  var strength = Math.floor(Math.random() * 20 + 1);
  function yumpizza() {
    document.getElementById("pizza").innerHTML = ("Strength:" + strength);
    document.getElementById("pizzaButton").onclick = null;
  }
</script>

document.getElementById("pizzaButton").disabled = true;

document.getElementById("pizzaButton").disabled = true;

5) Trình chuyển đổi chức năng không chính thống

5-switcher.html

<script>
// (A) ALREADY CLICKED
function doClicked () {
  alert("You have already clicked!");
}
 
// (B) NORMAL FUNCTION
function doSomething () {
  // (B1) SWITCH FUNKY TO DO THE IDLE FUNCTION
  funky = doClicked;
 
  // (B2) DO YOUR PROCESSING HERE
  alert("Something is done!");
}

// (C) FUNKY SWITCHING FUNCTION
var funky = doSomething;
</script>
 
<!-- (D) HTML BUTTON -->
<input type="button" id="myButton" onclick="funky()"
       value="Click Here To Do Something"/>

Phương pháp cuối cùng này không thực sự là một cú nhấp chuột vào một lần, mà là chuyển đổi để làm một cái gì đó hoàn toàn khác sau lần nhấp đầu tiên.

• Tạo chức năng đầu tiên của bạn

  document.getElementById("pizzaButton").disabled = true;
  

  5 - cái này sẽ thực hiện xử lý dự định chính của bạn.
• Tạo chức năng thứ hai của bạn

  document.getElementById("pizzaButton").disabled = true;
  

  6 - đây có thể là một đơn giản, vui lòng chờ đợi, bây giờ đang xử lý tin nhắn, hoặc một quả trứng Phục sinh để sợ người dùng.
• Sau đó tạo một biến, trỏ nó vào hàm đầu tiên

  document.getElementById("pizzaButton").disabled = true;
  

  7.
• Trong dòng đầu tiên của & nbsp; ________ 25, chuyển đổi

  document.getElementById("pizzaButton").disabled = true;
  

  9.
• Đó là về nó. Cuối cùng, & nbsp; Chỉ cần trỏ

  <button id="pizzaButton" onClick="yumpizza();" style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>
  
  <script>
    var strength = Math.floor(Math.random() * 20 + 1);
    function yumpizza() {
      document.getElementById("pizza").innerHTML = ("Strength:" + strength);
      document.getElementById("pizzaButton").onclick = null;
    }
  </script>
  

  0 của nút vào

      var strength = Math.floor(Math.random() * 20 + 1);
      function yumpizza() {
      document.getElementById("pizza").innerHTML = ("Strength:" + strength)
  }
  $('button').on('click', function() {
      $(this).disable();
  });
  

  1.

CÁI NÀO TỐT NHẤT?

Tất cả các phương pháp trên chỉ hoạt động tốt, vì vậy bất cứ điều gì phù hợp với nhu cầu của bạn. Nhưng nếu bạn đang thực hiện việc bảo vệ một cú nhấp chuột này để ngăn chặn những thứ như nhiều đăng ký. Vui lòng nhớ thực hiện kiểm tra của bạn trên phía máy chủ, kiểm tra xem tên người dùng hoặc email đã cho đã được đăng ký.

Ngoài ra, nếu bạn đang nghĩ để dừng thư rác với điều này, xin vui lòng không thực hiện một captcha. Google cung cấp nó như một dịch vụ miễn phí và tôi sẽ đặt một liên kết dưới đây.

Liên kết & Tài liệu tham khảo

• Nhận phần tử theo ID - MDN
• Người nghe sự kiện - MDN
• Biểu mẫu liên hệ PHP với Google Recaptcha - Mã Boxx

Video hướng dẫn

Bảng gian lận infographic

KẾT THÚC

Cảm ơn bạn đã đọc, và chúng tôi đã đi đến cuối hướng dẫn này. Tôi hy vọng rằng nó đã giúp bạn với dự án của bạn và nếu bạn muốn chia sẻ bất cứ điều gì với hướng dẫn này, xin vui lòng bình luận bên dưới. Chúc may mắn và mã hóa hạnh phúc!