JavaScript

aタグ内の子要素のクリックイベントによる画面遷移ができない【javascript】

この記事タイトルとURLをコピー

この記事でわかること

  • aタグ内の子要素のクリックイベントで画面遷移する方法

結論

クリックイベントの中でpreventDefault()を使う

経緯

aタグ内の子要素のクリックイベントで画面遷移をしたい状況があり、以下のような構造のコードを書いたら、jsは実行されているのに、なぜか親要素のリンク先に飛んでしまうということがありました。

<a href="https://google.com">親要素<button>子要素</button></a>

<script>
  window.onload = () => {
    document.querySelector("button").addEventListener("click", () => {
      location.href = "https://amazon.com";
    });
  };
</script>

ちょっと調べたところ、バブリングが関係していそうということが分かったので、イベントの伝播を止めるために以下のように修正してみました。

<script>
  window.onload = () => {
    document.querySelector("button").addEventListener("click", (e) => {
      e.stopPropagation();
      location.href = "https://amazon.com";
    });
  };
</script>

が、これではだめでした。

なぜかというと、stopPropagation() はイベントの伝播は防げますが、aタグやformタグ内のサブミットボタンなど、ブラウザのデフォルトの処理は止めることができないためです。

これを止めるためにはpreventDefault()を使います。

prevent(妨げる)Default(デフォルトを)とある通り、これならタグのデフォルトの処理も止めることができます。

<script>
  window.onload = () => {
    document.querySelector("button").addEventListener("click", (e) => {
      e.preventDefault();
      location.href = "https://amazon.com";
    });
  };
</script>

これで無事子要素のクリックイベントで画面遷移ができるようになりました！

この記事タイトルとURLをコピー

-JavaScript