1
質問内容

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

知りたいこと

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

参考サイト

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

script.js

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();    

}


index.html
<!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>

1 件の回答 1

4

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。