MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. stop修飾子

stop修飾子

Vue.js
2024.05.31

stop修飾子は、イベントが親要素に伝播するのを防ぎます。
※特定の要素でイベントを制御可能

stop修飾子
記法

@イベント.stop=”イベント名”

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>stop修飾子について</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="app">
      <p>stop修飾子の例</p>
      <div class="parent" @click="handleParentClick">
        親要素をクリック
        <button class="child" @click="handleChildClick">
          子要素をクリック（stopなし）
        </button>
      </div>
      <div class="parent" @click="handleParentClick">
        親要素をクリック
        <button class="child" @click.stop="handleChildClick">
          子要素をクリック（stopあり）
        </button>
      </div>
    </div>
    <!-- CDN -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
// Vueアプリケーションの作成とマウント
Vue.createApp({
  data() {
    return {
      message: "こんにちは！",
    };
  },
  methods: {
    handleParentClick() {
      alert("親要素がクリックされました！");
    },
    handleChildClick() {
      alert("子要素がクリックされました！");
    },
  },
}).mount("#app");
.parent {
  padding: 20px;
  border: 2px solid black;
  display: inline-block;
  margin-bottom: 20px;
}

.child {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid blue;
  background-color: lightblue;
}
出力結果

stop修飾子の例

親要素をクリック
親要素をクリック
Vue.js