JavaScriptでaタグ内の特定の要素をクリックした際にページ遷移させず別の処理を行う方法

JavaScriptでaタグ内の特定の要素をクリックした際にページ遷移させず別の処理を行い、それ以外の場所をクリックした場合はページ遷移させたいというケースがあった。また、HTMLのタグ構成は変更できないという制約がある状況。以下に対応方法をメモ。

対応方法

ソースコード

<style>
a{
    display: block;
    width: 300px;
    height: 300px;
    background-color: #f00;

    .click{
        margin: 10px;
        padding: 10px;
        background-color: #000;
    }
}
</style>
<a href="link">
    <div class="click">クリック</div>
</a>
<script>
document.querySelector('.click').addEventListener('click', (event) => {
    event.stopPropagation();
    event.preventDefault();

    console.log('遷移しません');
});
</script>

リファレンス

Event: stopPropagation() メソッド

https://developer.mozilla.org/ja/docs/Web/API/Event/stopPropagation

Event: preventDefault() メソッド

https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault