Vue.js + Call the click event for whole page document

Question

With JQuery, click event of the any item in the page can be captured as below.

$(document).click(function(event){
     // event.target is the clicked element object
});

How to do the same with Vue.js?

Answer 1

The answer provided by M U is correct and works.

Yet if you don't like messing with your template (e.g. not put a lot of event handlers in it) or your Vue app is only a small part of a bigger application, it's also perfectly fine and acceptable to register event handlers manually.

To add global event handlers in your script the Vue way you should register them in the mounted and remove them in the beforeDestroy hooks.

Short example:

var app = new Vue({
  el: '#app',
  mounted: function () {
    // Attach event listener to the root vue element
    this.$el.addEventListener('click', this.onClick)
    // Or if you want to affect everything
    // document.addEventListener('click', this.onClick)
  },
  beforeDestroy: function () {
    this.$el.removeEventListener('click', this.onClick)
    // document.removeEventListener('click', this.onClick)
  },
  methods: {
    onClick: function (ev) {
      console.log(ev.offsetX, ev.offsetY)
    }
  }
})