diff options
Diffstat (limited to 'files/ja/web/api/htmldialogelement/cancel_event/index.html')
| -rw-r--r-- | files/ja/web/api/htmldialogelement/cancel_event/index.html | 122 |
1 files changed, 122 insertions, 0 deletions
diff --git a/files/ja/web/api/htmldialogelement/cancel_event/index.html b/files/ja/web/api/htmldialogelement/cancel_event/index.html new file mode 100644 index 0000000000..ff339a0b1b --- /dev/null +++ b/files/ja/web/api/htmldialogelement/cancel_event/index.html @@ -0,0 +1,122 @@ +--- +title: 'HTMLDialogElement: cancel イベント' +slug: Web/API/HTMLDialogElement/cancel_event +tags: + - API + - Event + - HTML DOM + - HTMLDialogElement + - NeedsExample + - cancel + - events + - イベント +translation_of: Web/API/HTMLDialogElement/cancel_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>cancel</code></strong> イベントは、ユーザーが現在開いているダウアログを閉じたいと操作したときに {{HTMLElement("dialog")}} に発生します。例えば、ユーザーがブラウザーの UI の中で <kbd>Esc</kbd> キーを押したり、「ダイアログを閉じる」ボタンをクリックしたりしたりしたときにブラウザーがこのイベントを発生させることがあります。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">バブリング</th> + <td>なし</td> + </tr> + <tr> + <th scope="row">キャンセル</th> + <td>可</td> + </tr> + <tr> + <th scope="row">インターフェイス</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">イベントハンドラープロパティ</th> + <td>{{domxref("GlobalEventHandlers/oncancel", "oncancel")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Live_example" name="Live_example">ライブ例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><dialog class="example-dialog"> + <button class="close" type="reset">Close</button> +</dialog> + +<button class="open-dialog">Open dialog</button> + +<div class="result"></div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">button, div { + margin: .5rem; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: 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(); +}); +</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '100px') }}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('HTML WHATWG', 'indices.html#event-cancel', 'cancel') }}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.HTMLDialogElement.cancel_event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers.oncancel")}}</li> + <li>HTML {{HTMLElement("dialog")}} element</li> + <li>{{domxref("HTMLDialogElement/close_event", "close")}}</li> +</ul> |