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

初心者さん

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

このような疑問をお持ちの方に向けて書いています。

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

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

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

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

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

.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がついているため、イベントがストップし親に伝播されない。

saveボタンをクリック

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

.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のイベントの発火を止める（制御する）ための方法を紹介しました。

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

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