jquery modal で関係要素が反応してしまう

jeuryを使って、モーダルを作っています。
表示はできたのですが、閉じる動作がうまくいきませんでした。。。

ソース

<!DOCTYPE html>
<html>
 <head>
   <meta charaset="utf-8">
   <title>サンプル</title>
   <style>

  .fullOverlay{
    position: absolute;
    left: 100px;
    top: 50px;
    width: 300px;
    height: 100px;
    border: 2px solid gray;
    padding-top: 15px;
    z-index: 2147483647;
    display: block !important;
  }
  #box{
    display: none;
  }
  input[type="text"]{
    margin: 5px;
  }
   </style>
</head>
 <body>
  <button id="target">クリック</butoon>
  <div id="box">
    <div id="close">X</div>
    <form action="">
      <label for="">
          名前:
          <input type="text">
      </label>
      <br>
      <label for="">
        Email:
        <input type="text">
      </label>
      <br>
      <input type="submit" value="送信">
    </form>
  </div>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    (function () {
      $('#target').click(()=> {
        console.log("#target")    
        $('#box').addClass("fullOverlay")
      })  

      $('#close').click(() => {
        console.log("#close")
        $('#box').removeClass("fullOverlay")
      })     
    }());
    </script>
 </body>
</html>

実装の大枠

モーダル要素には、display:none;が初期状態で当たっています。
クリックボタンを押すと、display: block;
Xを押すと fullOverlayクラスを外して、display:none;にする動作が
期待する動作です。

キャプチャー

初期状態

クリックすると

モーダル的なものが表示されます

Xをクリックして非表示を試みるもうまく行かず

Xをクリックして、コンソールログで見ていると、

Xをクリックして、$('#close')のイベントだけを発火させたいのに
$('#target')のイベントも発火してしまいうまくいきません。

どなたか原因がお分かりになる方はいらっしゃいますか？

行動規範の内容に同意します

回答1件

ベストアンサー

HTML
1 <button id="target">クリック</butoon> <!-- button の間違い -->

閉じタグが間違っているので、以降の要素がすべて<button id="target">の子要素になってしまっています。

閉じるボタンのクリックイベントが発生すると、親要素である<button id="target">にもそのイベント伝搬して、
modalを開く命令がmodalを閉じた直後に実行されているようです。

投稿2020/07/11 06:53

編集2020/07/11 06:55

KonPota

総合スコア121

Awtanabe

2020/07/11 07:42

できましたーーー！！！ typo......ありがとうございます

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！