を使う 経緯 aタグ内の子要素のクリックイベントで画面遷移をした){kind=link}
この記事でわかること
- 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>これで無事子要素のクリックイベントで画面遷移ができるようになりました！