preventDefault trong JavaScript và cách dừng xử lý mặc định | Laptrinhcanban.com

preventDefault trong JavaScript và cách dừng xử lý mặc định

Cùng tìm hiểu về preventDefault trong JavaScript. Bạn sẽ biết cách dùng preventDefault để dừng xử lý mặc định của một sự kiện trong JavaScript sau bài học này.

preventDefault trong JavaScript là gì

preventDefault trong JavaScript là một phương thức của Event Object, có tác dụng dừng xử lý mặc định của một sự kiện khi nó xảy ra. Sau khi xử lý mặc định bị dừng bởi preventDefault, chúng ta có thể ghi các xử lý khác mong muốn.

Cú pháp sử dụng preventDefault để dừng xử lý mặc định của một sự kiện như sau:

event.preventDefault()

Trong đó event là đối tượng chứa thông tin về một sự kiện khi nó được bắt. Lưu ý không phải tất cả các sự kiện trong JavaScript đều có thể bị huỷ bởi preventDefault, mà chỉ có các sự kiện có thuộc tính Event.cancelable là true mới dùng được mà thôi.

Ví dụ cụ thể về cách dừng xử lý mặc định của sự kiện:

let target = document.getElementById('sample');

target.addEventListener('click', function(event){
event.preventDefault();
});

Mã mẫu

Sau đây hãy cùng xem demo về cách dừng xử lý mặc định của sự kiện bằng preventDefault như sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>Sample</p>

<div>
<input type="checkbox" id="checkA">
<label for="checkA">Java</label>

<input type="checkbox" id="checkB">
<label for="checkB">PHP</label>
</div>

<script>
let checkb = document.getElementById('checkB');

checkb.addEventListener('click', function(event){
event.preventDefault();
alert('Không thể chọn');
});
</script>

</body>
</html>

Với mã HTML trên, chúng ta tạo ra 2 checkbox, trong đó checkbox đầu tiên sẽ chạy xử lý mặc định khi box được check, còn checkbox thứ 2 sẽ dùng preventDefault để dừng xử lý mặc định này.

preventDefault trong JavaScript

Trong trường hợp checkbox, sự kiện

Chúng ta có thể thực hiện việc check vào checkbox đầu tiên như sau:
preventDefault trong JavaScript

Tuy nhiên với checkbox thứ 2, do bị dừng xử lý mặc định nên chúng ta không tiến hành check được. Sau khi xử lý mặc định bị dừng, các xử lý khác được mô tả sẽ chạy, và xuất hiện hộp thoại cảnh báo như sau:

preventDefault trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách dừng xử lý mặc định bằng preventDefault trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.