Vue/Nuxtでイベントの発火を止める方法【イベント修飾子・CSS】

プログラミング

Vue/Nuxt.jsで、イベントを制御する方法を知りたい。

この記事では、このような疑問に答えていきます。

Vue/Nuxt.jsでコードを書いていて、イベントを制御したい場面があります。親要素がクリックしたら子要素のイベントが発火して、想定外の動きになった。

▼この記事では、そのような時に使えるイベントの制御について理解できる内容となっています。

  1. Vue/Nuxt.jsでイベントを抑止するイベント修飾子
  2. Vue/Nuxt.jsのイベントをCSSで抑止する方法

イベントの抑止には、Vue/Nuxt.jsのイベント修飾子を使って制御する方法とCSSで制御する方法があります。どちらで制御するのか、ベターな選択をして機能を実装するといいと思います。

本記事の信頼性

  • エンジニア歴10年以上
  • プログラミングスクール運営側の経験あり
  • WebデザインからWeb業界へ転職
  • 現在はフリーランスエンジニアとして企業に常駐(在宅勤務)



目次

  1. Vue/Nuxt.jsでイベントを抑止するイベント修飾子
    • .stop
    • .prevent
    • .self
  2. Vue/Nuxt.jsのイベントをCSSで抑止する方法
    • 親要素のクリックイベントのみ有効にしたい場合、子要素をCSSで制御するサンプルコード
    • pointer-events: noneを使用する
  3. Vue/Nuxtでイベントの発火を止める方法まとめ

Vue/Nuxt.jsでイベントを抑止するイベント修飾子

Vue/Nuxt.jsでイベントの伝播を抑止する3つの修飾子を紹介します。

  • .stop
  • .prevent
  • .self

.stop

Vue/Nuxt.jsの「.stop」はevent.stopPropagationが呼ばれる。event.stopPropagationはこれ以上の伝播を抑止します。

<template>
  <a class='parent' @click='parentClick()'>
    <button type="button" @click.stop='deleteEvent()'>delete</button>
    <button type="button" @click='saveEvent()'>save</button>
  </a>
</template>


<script>
export default {
  components: {},
  data() {
    return {
    }
  },
  methods: {
    parentClick() {
      console.log('■■■■■ 親のイベント');
    },
    deleteEvent() {
      console.log('delete')
    },
    saveEvent() {
      console.log('save')
    }
  }
}
</script>

deleteボタンをクリック

deleteボタンにはクリックイベントに.stopがついているため、イベントがストップし親に伝播されない。

vueの@click.stop

saveボタンをクリック

saveボタンは、クリックイベントが発火するとsaveボタンのイベントの後に親のparentClick()も発火されています。

vueの@click

.prevent

.preventは、内部でevent.preventDefaultを呼び出しています。formでsubmitした場合にactionで指定したページにリダイレクトするのを抑えます。

.preventがない場合

aタグをクリックすると、parentClick()が呼ばれ、hrefの#pege-bottomへ遷移します。

<template>
  <a href='#pege-bottom' class='parent' @click='parentClick()'></a>
</template>

.preventがある場合

aタグをクリックすると、parentClick()が呼ばれ、hrefに設定されている#pege-bottomは遷移しません。イベントが抑止されています。

<template>
  <a href='#pege-bottom' class='parent' @click.prevent='parentClick()'></a>
</template>

.self

親要素に.selfを付与した場合にのみ発火されるイベントです。saveボタンをクリックしても親のparentClick()は呼び出されない。

<template>
  <a href='#pege-bottom' class='parent' @click.self='parentClick()'>
    <button type="button" @click='deleteEvent()'>delete</button>
    <button type="button" @click='saveEvent()'>save</button>
  </a>
</template>

Vue/Nuxt.jsのイベントをCSSで抑止する方法

Vue/Nuxt.jsに限ったことではないですが、CSSでイベントを抑止する方法があります。

親要素のクリックイベントのみ有効にしたい場合、子要素をCSSで制御するサンプルコード

<template>
  <a class='parent' @click='parentClick()'>
    <button type="button" @click='deleteEvent()'>delete</button>
    <button type="button" class="save-btn" @click='saveEvent()'>save</button>
  </a>
</template>

<script>
export default {
  components: {},
  data() {
    return {
    }
  },
  methods: {
    parentClick() {
      console.log('■■■■■ 親のイベント');
    },
    deleteEvent() {
      console.log('delete')
    },
    saveEvent() {
      console.log('save')
    }
  }
}
</script>

<style>
.save-btn {
  pointer-events: none;
}
</style>

pointer-events: noneを使用する

上記サンプルコードにあるようにCSSの「pointer-events: none」を付与すると、saveボタンをクリックしてもsaveEvent()が呼ばれなくなります。

Vue/Nuxtでイベントの発火を止める方法まとめ

今回は、Vue/Nuxt.jsのイベントの発火を止める(制御する)ための方法を紹介しました。

業務で親要素のイベントで制御していたものが、子要素を追加して予期しない動作になり、原因を調べていたところ子要素のイベントが悪さをしていたということがありました。

その時に最適な方法で制御してみてください。

当サイトで申込の多いプログラミングスクール

TechAcademyの無料体験
マンツーマンでオリジナルアプリの作成ができるテックアカデミーは人気が高いプログラミングスクール。
Webエンジニア輩出実績トップクラスの【ポテパンキャンプ】
転職に強く本気でエンジニア転職を目指す人におすすめ。難易度が高いため身につくスキルも高く企業からの評価も高いのが特徴。
CodeCamp無料体験
講師を選択できるのが特徴のコードキャンプ。チャットでの質問ができないと言われていますが、オプションでチャットサポートを選択できるのがあまり知られていない。講師の評判が高いため質問しながらどんどん進みたい人向け。