javascript e.preventDefaultの後の挙動

Question

javascriptでモーダルウィンドウを作成しています。
小さな写真を用意してクリックしたら写真が大きくなりdisplay=block、×と後ろオーバレイをクリックしたらdisplay=noneで閉じるというよくある実装をしています。
しかし実装はできたのですが他のページへ移行できなくなりました。
恐らくe.preventDefault()のせいだと思うのですがこの後にどうゆう処理をしたらいいのか分かりません。
教えていただけませんか？

         <div id="modal">
            <div class="modal-content f_wrap">
              <a href="#" id="modal_close">×</a>
              <img src="images/img.jpg" width="500px" height="400px" alt="スケジュール">
            </div>
          </div>
          <p id="modal_open">
            <a href="">
              <img src="images/img.jpg" width="200px" height="200px" alt="スケジュール">
            </a>
          </p>

div#modal {
  display: none;
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

div#modal div.modal-content {
  width: 600px;
  height: 500px;
  position: absolute;
  top: 100px;
  left: calc(50% - 300px);
  background-color: white;
  justify-content: center;
  align-items: center;
}

div.modal-content a {
position: absolute;
right: 10px;
top: 0px;
font-size: 40px;
font-weight: bold;
}

  var btn = document.getElementById('modal_open');
  var btn_close = document.getElementById('modal_close');
  var modal = document.getElementById('modal');

  btn.addEventListener('click',function() {
    modal.style.display = 'block';
  });

  btn_close.addEventListener('click',function() {
    modal.style.display = 'none';
  });

  window.addEventListener('click',function(e) {
    e.preventDefault();
    if(e.target == modal) {
      modal.style.display = 'none';
    }
  });

Comments

[Lhankor_Mhy]

e.preventDefault(); を外すのではダメなのですか？

Answer 1

そもそも、<a> でマークアップすることが間違っています。
a要素はリンクであり、ボタンではありません。

<a> を削除すれば、event.preventDefault() は不要となります。

Re: big_sky さん

Comments

[big_sky]

aタグによって色々挙動が変わってたので自分的には驚きでした。
ありがとうございます。

[think49]

<a>の挙動を期待して、<a>でマークアップしたという事でしょうか。
何を期待したのか不明ですが、HTML/CSS/JavaScriptの役割を踏まえて、「どの技術を使って目的の挙動を実装すべきか」を吟味する必要があります。
マークアップを変えて実装するのは、古くはテーブルレイアウトの発想に近いと思います。

Answer 2

windowにpreveneDeafultはまずいですね

window.addEventListener('DOMContentLoaded', function(e){
  var btn = document.querySelector('#modal_open');
  var btn_close = document.querySelector('#modal_close');
  var modal = document.querySelector('#modal');
  btn.querySelector('a').addEventListener('click',function(e) {
    e.preventDefault();
    modal.style.display = 'block';
  });
  btn_close.addEventListener('click',function() {
    modal.style.display = 'none';
  });
  modal.addEventListener('click',function(e) {
    e.preventDefault();
  });
  window.addEventListener('click',function(e) {
    if(e.target== modal) {
      modal.style.display = 'none';
    }
  });
});

コピペ用

コピペで動かないというので以下をコピペしてください
（HTMLやCSSは元ソースからいじってません）

<style>
div#modal {
  display: none;
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

div#modal div.modal-content {
  width: 600px;
  height: 500px;
  position: absolute;
  top: 100px;
  left: calc(50% - 300px);
  background-color: white;
  justify-content: center;
  align-items: center;
}

div.modal-content a {
position: absolute;
right: 10px;
top: 0px;
font-size: 40px;
font-weight: bold;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function(e){
  var btn = document.querySelector('#modal_open');
  var btn_close = document.querySelector('#modal_close');
  var modal = document.querySelector('#modal');
  btn.querySelector('a').addEventListener('click',function(e) {
    e.preventDefault();
    modal.style.display = 'block';
  });
  btn_close.addEventListener('click',function() {
    modal.style.display = 'none';
  });
  modal.addEventListener('click',function(e) {
    e.preventDefault();
  });
  window.addEventListener('click',function(e) {
    if(e.target== modal) {
      modal.style.display = 'none';
    }
  });
});
</script>
<div id="modal">
  <div class="modal-content f_wrap">
    <a href="#" id="modal_close">×</a>
    <img src="images/img.jpg" width="500px" height="400px" alt="スケジュール">
  </div>
</div>
<p id="modal_open">
  <a href="">
    <img src="images/img.jpg" width="200px" height="200px" alt="スケジュール">
  </a>
</p>

Comments

[big_sky]

ありがとうございます。
コピペして貼り付け他のですが反応しませんでした。
とりあえずオーバーレイをタッチしたら消える機能を無くして、×を押した時のみ消えるようにしました。
とりあえずですが。。

[yambejp]

コピペでうごくはずですが？どうしてもダメそうなら
ご使用のOS,ブラウザの種類とバージョンを明記ください

Answer 3

  window.addEventListener('click',function(e) {
    e.preventDefault();
    if(e.target == modal) {
      modal.style.display = 'none';
    }

if文の中にいれればいいだけだと思いますよ。