shimgo
1/17/2019 - 1:28 AM

重なった要素をクリックしたときに両方の要素のクリックイベントが発火してしまう

event_bubbling
content_copyfile_download
  • Rendered
  • Source

ある要素をクリックしたとき、クリックイベントは親に伝播していく。そのため親にもクリック時の挙動を設定しているとそれが発火してしまう。 なのでイベント伝播を子要素でとどめる設定が必要。

Vue.jsの場合はイベント修飾子を使う。 https://jp.vuejs.org/v2/guide/events.html#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E4%BF%AE%E9%A3%BE%E5%AD%90
下記例ではchildで伝播を止めているため、リンクをクリックした時のイベントがparentに伝わらない。

<div class="parent" @click="someMethod()" v-if="visibleMenu">
  <div class="child" v-if="visibleMenu" @click.stop>
    <nuxt-link :to="{ path: '/foo' }" >foo</nuxt-link>

javascriptで書く場合は下記のいずれかの方法で制御する。

  • e.preventDefault()
    当該要素のキャンセル可能なデフォルトアクション(リンク先に飛ぶなど)をキャンセルする(親要素への伝播はそのまま)
  • e.stopPropagation()
    親要素への伝播を止める(当該要素のデフォルトアクションはそのまま)
  • return false
    上記両方