Preventdefault trong Javascript

Trong lập trình web, JavaScript là một ngôn ngữ lập trình phổ biến được sử dụng để tạo ra các ứng dụng web tương tác và động. Trong quá trình phát triển các ứng dụng web, có thể sẽ gặp những tình huống mà bạn muốn thực hiện một số xử lý tùy chỉnh trong khi ngăn chặn các hành động mặc định của một sự kiện được kích hoạt bởi người dùng hoặc trình duyệt.

Preventdefault là gì?

Phương thức PreventDefault() trong JavaScript và jQuery được sử dụng để ngăn trình duyệt thực hiện hành động mặc định của phần tử đã chọn. Nó có thể ngăn người dùng xử lý yêu cầu bằng cách nhấp vào liên kết.

Cú pháp:

event.preventDefault()

Hoặc

e.preventDefault()

Ví dụ:

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script>
      $(document).ready(function() {
         $("a").click(function(event) {
            event.preventDefault();
         });
      });
   </script>
</head>
<body>
   <a href="https://Quachquynh.com">Quachquynh.com</a>
   <p>Nhấp chuột vào liên kết sẽ không xảy ra điều gì.</p>
</body>
</html>

Khi quan sát ví dụ trên thông thường khi nhấp vào liên kết thì nó sẽ chuyển tới trang đích. Tuy nhiên khi đặt event.preventDefault() thì sự kiện nhấp chuột sẽ bị ngăn lại.

Với phương thức preventDefault()cũng sẽ được áp dụng cho một số trường hợp như ngăn một liên kết theo sau URL để trình duyệt không thể truy cập trang khác. Hoặc ngăn không cho nút gửi của một Form liên hệ.

Việc sử dụng preventDefault() cho phép bạn ngăn chặn hành động mặc định của sự kiện và thực hiện các xử lý tùy chỉnh của riêng mình. Bằng cách này, bạn có thể tạo ra các ứng dụng web tương tác và động phức tạp hơn, cho phép người dùng thực hiện các hành động tùy chỉnh trên trang web của bạn.

Ví dụ, khi người dùng nhấn vào một liên kết trên trang web của bạn, bạn có thể sử dụng preventDefault() để ngăn chặn trình duyệt điều hướng đến trang web mới và thay vào đó, thực hiện một số xử lý tùy chỉnh trên trang web hiện tại. Ví dụ khác là khi người dùng điền thông tin vào một biểu mẫu và nhấn nút Gửi, bạn có thể sử dụng preventDefault() để ngăn chặn trình duyệt gửi yêu cầu đến máy chủ và thực hiện một số xử lý tùy chỉnh trên trang web của bạn.

Như vậy chúng ta thấy rằng, preventDefault() là một phương thức quan trọng trong JavaScript, cho phép bạn ngăn chặn các hành động mặc định của trình duyệt và thực hiện các xử lý tùy chỉnh của riêng mình trong quá trình phát triển ứng dụng web.