Nếu bạn đã ở trong thế giới quản trị trang web một thời gian thì bạn sẽ biết rằng người dùng của bạn hoạt động theo Định luật Sod - "Nếu bất cứ điều gì có thể sai, nó sẽ xảy ra". Trang này giải quyết một trong những vấn đề ít phổ biến hơn nhưng vẫn khá khó chịu, nhấp đúp Show
Nhấp đúp nhanh vào một nút hoặc liên kết có thể gây ra những hậu quả ngoài ý muốn, chẳng hạn như một biểu mẫu được gửi hai lần hoặc một tập lệnh chạy song song với chính nó và gặp phải các điều kiện tương tranh. Vậy làm thế nào chúng ta có thể ngăn chặn nó? Vô hiệu hóa các nút biểu mẫuTrong ví dụ này, bạn có thể nhấp vào nút đầu tiên bao nhiêu lần tùy thích, trong khi nút thứ hai sẽ chỉ phản hồi một lần Trong thực tế, mỗi lần nhấp có thể khiến một biểu mẫu được gửi hoặc một số sự kiện khác được kích hoạt mỗi lần. Đối với nút thứ hai, chúng tôi đã thêm một số JavaScript để nó chỉ chấp nhận một lần nhấp và bỏ qua tất cả các lần nhấp tiếp theo Mẹo nhỏ là sử dụng JavaScript để đặt thuộc tính bị vô hiệu hóa của nút thành đúng Thuộc tính bị vô hiệu hóa lần đầu tiên được Microsoft giới thiệu nhưng sau đó đã được W3C chấp nhận làm tiêu chuẩn và được tất cả các trình duyệt web chấp nhận Đối với một hình thức đơn giản, không có JavaScripts được liên kết, bạn có thể sử dụng .. Bằng cách này, khi biểu mẫu được gửi - bằng cách nhấp vào nút gửi hoặc nhấn Enter trong trường nhập văn bản - nút gửi sẽ bị tắt để ngăn biểu mẫu được gửi nhiều lần Với một trình xử lý biểu mẫuNếu bạn đã sử dụng xác thực biểu mẫu JavaScript thì thay vào đó, lệnh có thể được thêm vào tập lệnh xác thực của bạn như sau .. Điều quan trọng là lệnh tắt nút được thêm vào cuối tập lệnh xác thực ngay trước khi gửi. Mặt khác, nếu xác thực không thành công, người dùng sẽ không có cơ hội gửi lại biểu mẫu Sử dụng đoạn mã trên, sau khi biểu mẫu đã được gửi, nếu người dùng nhấp vào nút [Quay lại] của trình duyệt thì nút gửi vẫn bị vô hiệu hóa khiến biểu mẫu không sử dụng được. Nếu bạn không muốn điều này, hãy đọc tiếp để biết một số cách khắc phục Thân thiện với người dùng hơnThay vì chỉ vô hiệu hóa nút, chúng tôi cũng có thể thay đổi văn bản để mọi người không bị nhầm lẫn. Ví dụ này trước tiên vô hiệu hóa nút và sau đó thay đổi nhãn từ "Gửi" thành "Vui lòng đợi. ". Nút thứ hai khôi phục trạng thái ban đầu Mã được thực thi khi biểu mẫu được gửi bao gồm như sau Mặc dù bản thân HTML cho biểu mẫu trông giống như .. Giải pháp nhấp ba lầnVới giải pháp thanh lịch hơn một chút này, nút Gửi chuyển qua ba trạng thái riêng biệt
Ở trạng thái mặc định, nhấp vào nút Gửi sẽ gọi tập lệnh xác thực biểu mẫu của chúng tôi (xem bên dưới) để đảm bảo rằng tất cả các trường đã được điền. Nếu không phải như vậy thì sẽ có một thông báo cảnh báo và tập lệnh tạm dừng Khi biểu mẫu vượt qua xác thực, văn bản nút được thay đổi thành "Đang gửi biểu mẫu. " và một biến JavaScript, form_ being_submitted được đặt thành true cho biết rằng quá trình gửi biểu mẫu đang được tiến hành Lần nhấp thứ hai vào nút Gửi sẽ tạo thông báo cảnh báo và vô hiệu hóa nút. Các nhấp chuột tiếp theo sẽ bị bỏ qua. Sự khác biệt so với các ví dụ trước là cảnh báo được hiển thị khi nút bị tắt lần đầu tiên Tập lệnh xác thực biểu mẫu của chúng tôi đang được gọi từ trình xử lý sự kiện onsubmit nên nó chỉ được gọi sau khi tất cả các yêu cầu xác thực biểu mẫu HTML5 đã được đáp ứng Mã nguồnTrong HTML cho biểu mẫu, trình xử lý onsubmit trước tiên sẽ kiểm tra xem liệu biểu mẫu có đang trong quá trình gửi hay không (lần nhấp thứ hai). Nếu vậy, nó sẽ hiển thị một cảnh báo và vô hiệu hóa nút gửi để ngăn các nỗ lực gửi biểu mẫu tiếp theo Nếu biểu mẫu chưa được gửi (lần nhấp đầu tiên), trình xử lý sẽ chạy xác thực JavaScript thông thường và nếu thành công, sẽ cho phép gửi biểu mẫu Nút Đặt lại và tập lệnh chỉ được sao chép từ ví dụ trước, với một điểm bổ sung là biến form_ being_submitted cũng được đặt lại thành false Để biết giải thích về thuộc tính bắt buộc, hãy xem bài viết của chúng tôi về Xác thực biểu mẫu HTML5 Sử dụng JavaScript bên ngoàiChúng tôi không thay đổi bất kỳ chức năng nào ở đây, chỉ chuẩn bị JavaScript để nó có thể được chuyển sang tệp JavaScript bên ngoài và loại bỏ sự cần thiết của các biến toàn cục Đầu tiên, chúng tôi loại bỏ bất kỳ trình xử lý sự kiện nào khỏi HTML và gán giá trị id cho các phần tử cần trình xử lý sự kiện Thực tế không cần phải gán id cho từng thành phần biểu mẫu. Chỉ những người có trình xử lý sự kiện và thậm chí sau đó chúng tôi có thể thực hiện chỉ với MẪU có id nếu chúng tôi muốn Bước tiếp theo là xác định và gán các chức năng xử lý sự kiện của chúng tôi. Sự khác biệt chính ở đây là mỗi hàm nhận một biến e đại diện cho sự kiện, từ đó e. mục tiêu có thể được sử dụng để xác định yếu tố nào được nhắm mục tiêu Và trong tập lệnh xác thực mẫu thay vì trả về false; . ngăn chặn Mặc định(); . Không cần trả về true; Cuối cùng, chúng tôi bọc tất cả mã trong một hàm DOMContentLoaded cho phép chúng tôi tạo các biến mà chúng không trở thành toàn cầu. Điều này cũng làm trì hoãn quá trình khởi tạo tập lệnh cho đến khi HTML được tải đầy đủ Giờ đây, JavaScript có thể được đưa vào nội tuyến trên trang hoặc trong một tệp JavaScript riêng biệt được tham chiếu bởi thẻ SCRIPT. Và nó sẽ không can thiệp vào bất kỳ tập lệnh nào khác trên trang vì trình xử lý sự kiện DOMContentLoaded tạo một bao đóng và các hàm chứa trong đó đều được định nghĩa là biến cục bộ Nếu bạn dự định bao gồm JavaScript nội tuyến thì thay vì sử dụng trình xử lý sự kiện DOMContentLoaded, bạn có thể sử dụng IIFE (Biểu thức hàm có thể gọi ngay lập tức) như sau (function() { var form_being_submitted = false; const checkForm = e => { .. }; const resetForm = e => { .. }; document.getElementById("test_form").addEventListener("submit", checkForm, false); document.getElementById("reset_button").addEventListener("click", resetForm, false); })();Trong trường hợp này, mã cần được đặt nội tuyến ở bất kỳ đâu sau MẪU - thường ở cuối trang trước thẻ đóng BODY. Nó không thể được tạo ra bên ngoài hoặc nó có thể thực thi trước khi DOM sẵn sàng để chỉ định các trình xử lý sự kiện Ngăn chặn nhấp đúp vào liên kếtMặc dù các tiêu chuẩn gợi ý rằng một liên kết HREF bình thường không nên kích hoạt bất kỳ hành động nào ngoài điều hướng, nhưng thường thì các liên kết kích hoạt một hành động, trong trường hợp đó, những vấn đề tương tự có thể phát sinh do mọi người nhấp đúp vào Cách khắc phục nhanh cho vấn đề này là thêm trình xử lý onclick vào các liên kết để vô hiệu hóa nó sau lần nhấp đầu tiên ngăn các lần nhấp tiếp theo Đây là một ví dụ đơn giản trong đó bất kỳ liên kết nào trên trang có lớp. nhấp một lần sẽ bị vô hiệu hóa sau lần nhấp đầu tiên ________số 8trình diễn làm việcTrong trường hợp này, nhấp chuột đầu tiên vào liên kết sẽ hoạt động bình thường đưa người dùng đến mục tiêu href. Đồng thời, nó thêm một trình xử lý sự kiện mới để nắm bắt và vô hiệu hóa các nhấp chuột trong tương lai trên cùng một liên kết
Lưu ý rằng chúng tôi đã sử dụng cú pháp chức năng mũi tên ES6 cho các chức năng của chúng tôi ở đây có thể không hoạt động trong các trình duyệt cũ hơn. Nhưng mã luôn có thể được viết lại thành vanilla JavaScript nếu đó là một vấn đề Làm cách nào để kiểm tra xem nút gửi có được nhấp trong JavaScript không?Chỉ cần sử dụng sự kiện nhấp chuột. . Sử dụng trình xử lý gửi cho phần tử biểu mẫu. . call a function when the submit button is clicked like this , and in that function do ur validation.. Điều gì xảy ra khi nhấp vào nút gửi?5. Hầu hết các biểu mẫu HTML đều có nút gửi ở cuối biểu mẫu. Khi tất cả các trường trong biểu mẫu đã được điền vào, người dùng nhấp vào nút gửi để ghi lại dữ liệu biểu mẫu . Hành vi tiêu chuẩn là thu thập tất cả dữ liệu đã được nhập vào biểu mẫu và gửi dữ liệu đó đến một chương trình khác để xử lý.
Tôi có thể nhấp vào nút bằng JavaScript không?Trong mã Javascript, chúng tôi tạo một biến lấy phần tử trên trang có id là selfclick (là nút chúng tôi đã tạo). Sau đó, chúng tôi thực hiện chức năng nhấp vào nút này bằng chức năng nhấp () Javascript. Và đây là cách chúng ta có thể nhấp vào nút bằng mã Javascript |
