Event: phương thức preventDefault()
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Note: This feature is available in Web Workers.
Phương thức preventDefault() của giao diện Event báo cho user agent biết rằng sự kiện đang được xử lý một cách tường minh, vì vậy hành động mặc định của nó, chẳng hạn cuộn trang, điều hướng liên kết, hoặc dán văn bản, không nên được thực hiện.
Sự kiện vẫn tiếp tục lan truyền như bình thường,
trừ khi một trong các bộ lắng nghe sự kiện của nó gọi
stopPropagation()
hoặc stopImmediatePropagation(),
và một trong hai hàm đó sẽ dừng việc lan truyền ngay lập tức.
Như đã lưu ý bên dưới, việc gọi preventDefault() cho một
sự kiện không thể bị hủy, chẳng hạn sự kiện được gửi đi qua
EventTarget.dispatchEvent(), mà không chỉ định
cancelable: true sẽ không có tác dụng.
Nếu một bộ lắng nghe thụ động gọi preventDefault(), sẽ không có gì xảy ra và có thể sinh ra cảnh báo trên console.
Note:
Hãy tìm các phương án tốt hơn thay vì dùng preventDefault() để chặn hành động mặc định. Ví dụ, bạn có thể dùng thuộc tính disabled hoặc readonly trên một điều khiển biểu mẫu để ngăn nó được tương tác, dùng xác thực ràng buộc HTML để từ chối dữ liệu đầu vào không hợp lệ, hoặc dùng thuộc tính overflow để ngăn cuộn.
Cú pháp
preventDefault()
Tham số
Không có.
Giá trị trả về
Không có (undefined).
Ví dụ
Chặn hành vi nhấp mặc định
Việc bật hoặc tắt một checkbox là hành động mặc định khi nhấp vào nó. Ví dụ này minh họa cách ngăn điều đó xảy ra:
JavaScript
const checkbox = document.querySelector("#id-checkbox");
checkbox.addEventListener("click", checkboxClick);
function checkboxClick(event) {
const warn = "preventDefault() sẽ không cho bạn tick ô này!\n";
document.getElementById("output-box").innerText += warn;
event.preventDefault();
}
HTML
<p>Vui lòng nhấp vào điều khiển checkbox.</p>
<form>
<label for="id-checkbox">Checkbox:</label>
<input type="checkbox" id="id-checkbox" />
</form>
<div id="output-box"></div>
Kết quả
Ghi chú
Việc gọi preventDefault() trong bất kỳ giai đoạn nào của luồng sự kiện đều hủy sự kiện,
nghĩa là mọi hành động mặc định mà phần cài đặt thường thực hiện do sự kiện đó sẽ không xảy ra.
Bạn có thể dùng Event.cancelable để kiểm tra sự kiện có thể bị hủy hay không.
Gọi preventDefault() cho một sự kiện không thể bị hủy sẽ không có tác dụng.
Thông số kỹ thuật
| Specification |
|---|
| DOM # ref-for-dom-event-preventdefault③ |