4 回閲覧されました

みなさんこんにちは、jonioです。

今回は@click.stopについて簡単なサンプルコードで解説します。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

@click.stopとは

子要素のイベントを親要素に伝えたくない時に使います。

イメージが全く沸かないと思うのでサンプルコードで解説します。

サンプルコード

まずは@click.stopを使わない場合です。

下記のコードで考えます。

<template>
  <div @click="handleParentClick">
    <button @click="handleButtonClick">ボタン</button>
  </div>
</template>

<script setup>
const handleParentClick = () => {
  alert('親がクリックされました');
};

const handleButtonClick = () => {
  alert('ボタンがクリックされました');
};
</script>

このコードの場合「ボタン」をクリックすると3行目が動作します。

そして2行目が動作します。

子要素のイベント（@click）が親要素に伝わるのが分かります。

次は@click.stopを使う場合です。

下記のコードで考えます。

<template>
  <div @click="handleParentClick">
    <button @click.stop="handleButtonClick">ボタン</button>
  </div>
</template>

このコードの場合「ボタン」をクリックすると3行目は動作しますが2行目は動作しません。

イメージとしては上の動作はせず@click.stopがあるメソッドだけが動作する感じです。

どんな時に使うか

イメージは分かったと思いますが用途が分からないと思います。

例えばモーダルを表示してモーダルの中身をクリックした時に閉じさせたくない時に使ったりします。

<template>
  <div class="modal" @click="closeModal">
    <div class="modal-content" @click.stop>
      <p>内容</p>
      <p>内容</p>
      <p>内容</p>      
    </div>
  </div>
</template>

.modalがモーダルの外側で.modal-contentがモーダルの中身です。

closeModalがモーダルを閉じるメソッドと思ってください。

モーダルの中身に@click.stopがあるのでモーダルの中身をクリックしてもモーダルは閉じません。