【Vue3】クリックイベントを重ねて実装する方法

はじめに

私は、Todoリストのようなカードに編集ボタンを実装しました。
カード自体にクリックイベントをつけ、編集ボタンにもクリックイベントをつけます。そうすると、編集ボタンを押してもカード自体のクリックイベントが発生してしまいました。

Card.vue

<div @click="goReferencePage()">
    <span @click="goEditPage()"></span>
    <span @click="deleteCard()"></span>
</div>

解決方法

stop修飾子を利用しました！.stopはJavaScriptのstopPropagationを呼び出します。子要素に.stopを与えることで、親要素への伝搬を止めさせ、無事に子要素のクリックイベントを発生させることができました。

Card.vue

<div @click="goReferencePage()">
    <span @click.stop="goEditPage()"></span>
    <span @click.stop="deleteCard()"></span>
</div>