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.
document
?mounted
hook? Something likedocument.onclick = (e) => { console.log("x: " + e.clientX + " y: " + e.clientY) }
should be easy enough to test...doSomething
and in a mounted add a listener and check if it works ;-)