15

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?

4
  • 2
  • Thanks. But i want to know how to do it by Vue.js
    – asankasri
    Jan 31, 2017 at 6:02
  • 1
    What do you mean? Vue.js is just JavaScript and I'm pretty sure you can't mount a Vue instance on the document; it can only be mounted on an element
    – Phil
    Jan 31, 2017 at 6:10
  • If it's a Vue "single page app", then just put an @click in the highest element you can (usually whatever is right after <body>), as per @Marek's answer. If it's a web page with a mix-of-Vue-and-other-stuff and you want to capture clicks on the entire page... then you need a classic JS click listener, as well then it's no longer a Vue topic at all.
    – Kalnode
    Jun 25 at 12:41

4 Answers 4

32

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)
    }
  }
})
0
25

All of the answers provided works, but none of them mimic the real behavior of $(document).click(). They catch just clicks on the root application element, but not on the whole document. Of course you can set your root element to height: 100% or something. But in case you want to be sure, it's better to modify Bengt solution and attach event listener directly to document.

new Vue({
  ...
  methods: {
    onClick() {},
  }
  mounted() {
    document.addEventListener('click', this.onClick);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.onClick);
  },
  ...
});

Remember you need to use @click.stop in children elements if you for some reason need to stop event propagation to the main handler.

1
  • 1
    Kudos to Phil for already solving this in question comments.
    – xpuu
    May 17, 2018 at 16:11
12
  1. Create div as top node, right after <body>
  2. Make it main container and mount VueJS on it.
  3. <div id='yourMainDiv' @click='yourClickHandler'>
  4. In your VueJS <script> part use it:
methods: {
  yourClickHandler(event) {
    // event.target is the clicked element object
  }
}
3
  • 2
    Instead of wrapping the content in a div, cannot we use the body element? <body @click='yourClickHandler'>
    – asankasri
    Feb 1, 2017 at 9:26
  • not sure about that, never done it, but maybe can work Feb 1, 2017 at 9:27
  • 3
    You cannot bind Vue to the body element (see this) and therefore not provide a template containing a body-tag.
    – Bengt
    Feb 1, 2017 at 10:33
4

Also, if you need to track click event outside of specific element, you can use vue-clickaway component. Example from the demo:

<div id="demo">
  <p v-on-clickaway="away" @click="click" :style="{ color: color }">{{ text }}</p>
</div>


new Vue({
  el: '#demo',
  mixins: [VueClickaway.mixin],
  data: {
    text: 'Click somewhere.',
    color: 'black',
  },
  methods: {
    click: function() {
      this.text = 'You clicked on me!';
      this.color = 'green';
    },
    away: function() {
      this.text = 'You clicked away...';
      this.color = 'red';
    },
  },
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.