5

I need to capture all click events triggered by the user inside my Vue.js application. My first step was to add an onclick listener to the #app div:

<div id="app" @click="onClickApp"></div>
// ...
<script>
  export default {
    methods: {
      onClickApp() {
        // increment counter in vuex store
      }
   }
</script>

This captures all click events happening directly inside the App component. The issue is that I'm using a Bootstrap Modal (provided via BootstrapVue) and I need to capture the clicks inside it as well. This is not working at the moment, even if I set another @click listener on the <b-modal></b-modal> component (syntax for vue-cli).

This is what I also tried (in main.js):

new Vue({
  router,
  store,
  render: h => h(App),
  mounted: function() {
    this.$el.addEventListener('click', this.onClickVue)
  },
  beforeDestroy: function () {
    this.$el.removeEventListener('click', this.onClickVue)
  },
  methods: {
    onClickVue: function (e) {
      this.$store.commit(mutationTypes.INCREMENT_CLICKS)
    }
  });

Same problem, clicks inside the Bootstrap Modals are not firing a click event.

5
  • do you mean this: stackoverflow.com/questions/46899901/… Apr 12, 2019 at 21:04
  • Hm, thank you but I don't think so. This seems to be a solution for communicating between components via events, right? I just want to capture onclick events even in modals.
    – Johannes
    Apr 12, 2019 at 21:07
  • 1
    how about listening on a document ? Apr 12, 2019 at 21:35
  • Is it feasible to set the listener and handler inside of your app mounted hook? Something like document.onclick = (e) => { console.log("x: " + e.clientX + " y: " + e.clientY) } should be easy enough to test... Apr 12, 2019 at 21:36
  • Create a method for what you want to do doSomething and in a mounted add a listener and check if it works ;-) Apr 12, 2019 at 21:39

4 Answers 4

4

I could only get this to work by using the mouseup event..

CodePen mirror: https://codepen.io/oze4/pen/PgKWRW?editors=1010

new Vue({
  el: "#app",
  data: {
    modalShow: false
  },
  mounted() {
    document.addEventListener("mouseup", e => {
      let m = `x: ${e.clientX} | y: ${e.clientY}`;
      console.log(m);
    })
  }
});
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<div id="app">
  <div style="margin: 5px 0px 0px 40px">
    <b-button @click="modalShow = !modalShow">Open Modal</b-button>
    <b-modal v-model="modalShow">Hello From Modal!</b-modal>
  </div>
</div>

2
  • Thank you, this is working! I combined it with the approach of @marvin-irwin and it's doing exactly what I want.
    – Johannes
    Apr 13, 2019 at 9:02
  • Beautiful! Glad you were able to find a solution. Apr 13, 2019 at 14:56
1

A better answer is just adding ev to onClickApp, so do onClickApp(ev) inside your methods.

Now, you have access to the click event.

0

This should work ;-)

- <div id="app" @click="onClickApp"></div>
+ <div id="app"></div>
// ...
<script>
  export default {
    methods: {
      onClickApp() {
        // increment counter in vuex store
      }
   },
+  mounted() {
+    window.document.addEventListener('click'), this.onClickApp)
+  },
+  beforeDestroy() {
+    window.document.removeEventListener('click'), this.onClickApp)
+  }
</script>
1
  • Thanks, I already tried this (see my edit above), but still no clicks on the Modal are captured.
    – Johannes
    Apr 12, 2019 at 21:51
0

I couldn't find a way to test with Bootstrap Vue, but this might do.

TLDR: Create a plugin which will run whenever any of your components are instantiated. Put a listener on the root element.

https://codesandbox.io/s/kxwz85pl65

const MyPlugin = {
  install(Vue, options) {
    Vue.mixin({
      mounted() {
        setTimeout(() => {
          let cb = this.$root.$el.onclick;
          this.$root.$el.onclick = (e) => {
            alert("element clicked");
            if (cb) {
              cb(e);
            }
          };
        }, 10);
      }
    });
  }
};

EDIT:

As of writing this Vue Bootstrap doesn't seem to allow click events for the modal itself, though elements inside of it can be clicked.

https://codesandbox.io/embed/kxwz85pl65

EDIT again, you can use set timeout if you really want to. It's a bit of a hack though.

2
  • I really like your idea but the onclick isn't triggered in the modal, same effect as with my described functions in my question. If the page content is smaller than the viewport, no click events are triggered outside of the content (because #app is not stretched to viewport measures).
    – Johannes
    Apr 12, 2019 at 22:02
  • Thanks, but with the setTimeoutI get 23 click events fired when clicking on one element. Furthermore, the Bootstrap Modal is still not reacting to clicks. I will check adding a separate @click to every modal element. I think I've done that already in the past but let's give it a try.
    – Johannes
    Apr 12, 2019 at 22:44

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

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.