-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
138 lines (94 loc) · 3.23 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
---
title: "HTMLElement: cancel event"
short-title: cancel
slug: Web/API/HTMLElement/cancel_event
page-type: web-api-event
browser-compat: api.HTMLElement.cancel_event
---
{{APIRef}}
The **`cancel`** event is fired by {{HTMLElement("input")}} and {{HTMLElement("dialog")}} elements. The event is fired when the user cancels the currently open dialog by closing it with the <kbd>Esc</kbd> key. It is also fired by the [file input](/en-US/docs/Web/HTML/Element/input/file) when the user cancels the file picker dialog via the <kbd>Esc</kbd> key or the cancel button and when the user re-selects the same files that were previously selected.
This event does not bubble.
When a `<dialog>` is dismissed with the <kbd>Esc</kbd> key, both the `cancel` and {{domxref("HTMLDialogElement/close_event", "close")}} events are fired.
## Syntax
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
```js
addEventListener("cancel", (event) => {});
oncancel = (event) => {};
```
## Event type
A generic {{domxref("Event")}}.
## Examples
### Canceling a dialog
#### HTML
```html
<dialog class="example-dialog">
<button class="close" type="reset">Close</button>
</dialog>
<button class="open-dialog">Open dialog</button>
<div class="result"></div>
```
```css hidden
button,
div {
margin: 0.5rem;
}
```
#### JavaScript
```js
const result = document.querySelector(".result");
const dialog = document.querySelector(".example-dialog");
dialog.addEventListener("cancel", (event) => {
result.textContent = "dialog was canceled";
});
const openDialog = document.querySelector(".open-dialog");
openDialog.addEventListener("click", () => {
if (typeof dialog.showModal === "function") {
dialog.showModal();
result.textContent = "";
} else {
result.textContent = "The dialog API is not supported by this browser";
}
});
const closeButton = document.querySelector(".close");
closeButton.addEventListener("click", () => {
dialog.close();
});
```
#### Result
{{ EmbedLiveSample('Canceling a dialog', '100%', '100px') }}
### Canceling an input element
#### HTML
```html
<label for="file">Select or file. Or don't.</label>
<input type="file" id="file" name="file" />
<div id="result"></div>
```
```css hidden
div {
margin-bottom: 10px;
}
```
#### JavaScript
```js
const elem = document.getElementById("file");
const result = document.getElementById("result");
elem.addEventListener("cancel", () => {
result.textContent = "Canceled.";
});
elem.addEventListener("change", () => {
if (elem.files.length == 1) {
result.textContent = "File Selected.";
}
});
```
#### Result
{{ EmbedLiveSample('Canceling an input element', '100%', '100px') }}
Open the file selector, then close the selection dialog with the escape key or the cancel button. Both of these will cause the cancel event to be fired. Also, try selecting a local file on your machine; then reopen the file selection window and reselect the same file. This too causes the cancel event to be fired.
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- HTML {{HTMLElement("input")}} element
- HTML {{HTMLElement("dialog")}} element
- {{domxref("HTMLDialogElement/close_event", "close")}}