[解決済み] 要素外クリックの検出

質問

要素の外側でクリックを検出するにはどうすればよいですか？Vue.jsを使用しているので、テンプレート要素の外側になる予定です。私はVanilla JSでそれを行う方法を知っていますが、私はVue.jsを使用しているときに、それを行うためのより適切な方法があるかどうかは分かりませんか？

Vanilla JSの場合はこのように解決します。 Javascript divの外側でクリックイベントを検出する

要素にアクセスするためのより良い方法を使用することができると思います？

どのように解決するのですか？

この解決策は、Vue 1でのみ動作することに注意してください。

カスタムディレクティブを一度設定することで、うまく解決することができます。

Vue.directive('click-outside', {
  bind () {
      this.event = event => this.vm.$emit(this.expression, event)
      this.el.addEventListener('click', this.stopProp)
      document.body.addEventListener('click', this.event)
  },   
  unbind() {
    this.el.removeEventListener('click', this.stopProp)
    document.body.removeEventListener('click', this.event)
  },

  stopProp(event) { event.stopPropagation() }
})

使用方法

<div v-click-outside="nameOfCustomEventToCall">
  Some content
</div>

コンポーネントで

events: {
  nameOfCustomEventToCall: function (event) {
    // do something - probably hide the dropdown menu / modal etc.
  }
}

JSFiddle の Working Demo に注意事項を追加しました。

https://jsfiddle.net/Linusborg/yzm8t8jq/