HTMLDialogElement: sự kiện cancel
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2022.
Sự kiện cancel được kích hoạt trên một phần tử <dialog> khi người dùng kích hoạt một yêu cầu đóng.
Trình xử lý sự kiện cancel có thể được dùng để ghi đè hành vi mặc định khi nhận yêu cầu đóng, và ngăn hộp thoại đóng.
Nếu hành vi mặc định không bị ngăn, hộp thoại sẽ đóng và kích hoạt sự kiện close.
Các yêu cầu đóng có thể được kích hoạt bởi:
- Nhấn phím Esc trên các nền tảng máy tính để bàn
- Gọi phương thức
requestClose() - Nút quay lại trên các nền tảng di động
Sự kiện này có thể hủy và không nổi bọt.
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc thiết lập một thuộc tính trình xử lý sự kiện.
addEventListener("cancel", (event) => { })
oncancel = (event) => { }
Loại sự kiện
Một Event chung.
Ví dụ
Hủy một hộp thoại
Ví dụ sau đây hiển thị một nút bấm, khi được nhấp vào, sẽ mở một <dialog> bằng phương thức showModal().
Bạn có thể kích hoạt sự kiện cancel bằng cách nhấp vào nút Yêu cầu đóng để đóng hộp thoại (thông qua phương thức requestClose()) hoặc bằng cách nhấn phím Esc.
Lưu ý rằng trình xử lý sự kiện cancel ghi lại sự kiện rồi trả về, cho phép hộp thoại đóng (điều này dẫn đến sự kiện close được phát ra).
Bạn có thể bỏ chú thích dòng chứa event.preventDefault() để hủy sự kiện.
HTML
<dialog id="dialog">
<button type="button" id="request-close">Yêu cầu đóng</button>
</dialog>
<button id="open">Mở hộp thoại</button>
JavaScript
const dialog = document.getElementById("dialog");
const openButton = document.getElementById("open");
const requestCloseButton = document.getElementById("request-close");
// Nút mở mở một hộp thoại modal
openButton.addEventListener("click", () => {
log("sự kiện nhấp nút mở được kích hoạt", true);
log("đã gọi dialog showModal()");
dialog.showModal();
});
// Yêu cầu đóng
requestCloseButton.addEventListener("click", () => {
log("sự kiện nhấp nút yêu cầu đóng được kích hoạt");
log("đã gọi dialog requestClose()");
// Kích hoạt sự kiện cancel
dialog.requestClose();
});
// Được kích hoạt khi requestClose() được gọi
// Ngăn hộp thoại đóng bằng cách gọi event.preventDefault()
dialog.addEventListener("cancel", (event) => {
log("sự kiện cancel của dialog được kích hoạt");
// Bỏ chú thích hai dòng tiếp theo để ngăn hộp thoại đóng
// log("đã hủy đóng dialog");
// event.preventDefault();
});
dialog.addEventListener("close", (event) => {
log("sự kiện close của dialog được kích hoạt");
});
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| HTML # event-cancel |
| HTML # handler-oncancel |
Tương thích trình duyệt
Xem thêm
- Phần tử HTML
<dialog>