94390


##### 質問内容

提示コードの`<!-- ここに置きました
-->`ですがこの場所に提示コード下部のコード`<!--########-->`部のコードを置いたのですが。プログラムは実行でき`dialog`タグが`Javascript`を通して画面に表示されるのですがその後閉じるタグである`<button`タグのクリックしても閉じません。しかし`<!--########-->`の場所にコードを移動して実行すると閉じることができした。これなぜでしょうか？

##### 知りたいこと

dialogタグのコードを置く場所の理由が知りたい

##### 参考サイト

リファレンスサイト： https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog

##### script.js

[code]

    var dialog = document.querySelector("dialog");
    
    console.log(dialog?.close);
    var btn_close = document.getElementById("modal_Close");
    
    btn_close?.addEventListener('click',function()
    {
        console.log("close");
        dialog!.open = false;
    
        dialog?.close();
        console.log("end");
        
    
    },false);
    
    
    
    
    /*########################################################################
    # ポップアップウインドウを表示
    ##########################################################################*/
    function PopUpWindow_Show()
    {    
        dialog?.showModal();    
    
    }
    
    
    
[/code]

##### index.html

[code]

    <!DOCTYPE html>
    <html>
        <head>
            <title>test</title>
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>
    
        <body>
                <table>
                    <tr>
                        <th>2023</th>
                        <th>朝・午前 1</th>
                        <th>朝・午前 2</th>
                        <th>朝・午前 3</th>
                        <th>朝・午前 4</th>
    
                        <th>夜間・午後 1</th>
                        <th>夜間・午後 2</th>
                        <th>夜間・午後 3</th>
                        <th>夜間・午後 4</th>
                    </tr>
    
                    <tr>
    
    
                        <!-- 日付表示 -->
                        <td>
                            <div class="item">
                            <div><span>aaa</span></div>
                            <div><span>bbb</span></div>
                            <div style="border: none"><span>ccc</span></div>
                            </div>
                        </td>
    
                        <!-- 入力データ モーダルウインドウ -->
                        <td onclick="PopUpWindow_Show()">
                            内容    
    
                        <!-- ここに置きました -->
                        </td>
    
    
                    </tr>
    
                </table>
    
    <!-- ############################################## -->
                <dialog id="modalWindow">
                    <p>sample</p>
                    <button id="modal_Close">モードレスダイアログを閉じる</button>
                </dialog>
    <!-- ############################################## -->
                
            <script type="text/javascript" src="script.js"></script>
        </body>
    
    </html>
    
[/code]


CC BY-SA 4.0
2023-03-30T10:22:02.430
94381
2023-03-31T13:33:15.040
2023-03-30T13:21:13.650
-1
55177
question
typescript
dialogタグを配置場所の理由が知りたい。


ダイアログは閉じようとしていますが、そのあとすぐに開いているだけです。

`<td onclick="PopUpWindow_Show()">`の中に`<dialog
id="modalWindow">`が有り、そのまた中に`モードレスダイアログを閉じる'が有る形になります。阻止を明示しない限り、clickイベントは親要素への伝播するため、ボタンが押されると次のような動作になります。

  1. `<button>`に対してclickイベントが発生します。 
    1. `addEventListener`で紐付けられた関数が実行されます。
    2. 関数内の処理で、 **ダイアログは閉じられます。**
    3. 他に紐付けられた関数は無く、`stopPropagation()`も呼ばれなかったので、親要素にclickイベントが伝搬します。
  2. `<dialog>`に対してclickイベントが発生します。 
    1. 紐付けられた関数は無いので、親要素にclickイベントが伝搬します。
  3. `<td>`に対してclickイベントが発生します。 
    1. `onclick`のコードが実行され、`PopUpWindow_Show()`が実行されます。
    2. `PopUpWindow_Show()`の処理で、 **ダイアログは開かれます。**
    3. 他に紐付けられた関数は無く、`stopPropagation()`も呼ばれなかったので、親要素にclickイベントが伝搬します。
  4. 以下、`<tr>`、`<table>`、`<body>`、`<html>`とclickイベントが発生しますが、紐付けられた処理は無いため、何も行われません。

DOMの再描写はイベント処理が終わった後に行われますが、ダイアログは結局開いたままであるため、何も表示が変わらないと言うことになります。


CC BY-SA 4.0
2023-03-31T13:33:15.040
94390
2023-03-31T13:33:15.040
7347
94381
answer