Javascript 捕获Vue应用程序内的所有单击事件

我需要捕获Vue.js应用程序中用户触发的所有单击事件。我的第一步是将onclick侦听器添加到

#app

div：

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

同样的问题，引导模式中的点击不会触发点击事件。

这应该可以；-）

-
+ 
// ...
导出默认值{
方法：{
onClickApp（）{
//vuex存储中的增量计数器
}
},
+安装的（）{
+window.document.addEventListener（'click'），this.onClickApp）
+  },
+在…之前{
+window.document.removeEventListener（'click'），this.onClickApp）
+  }

更好的答案是将ev添加到onClickApp中，所以在方法中添加onClickApp（ev）

---

现在，您可以访问单击事件。

我找不到使用引导Vue进行测试的方法，但这可能可以

TLDR：创建一个插件，它将在实例化任何组件时运行。在根元素上放置一个侦听器

编辑：

在编写本文时，Vue引导程序似乎不允许模式本身的单击事件，尽管可以单击其中的元素

---

再次编辑，如果你真的想，你可以使用设置超时。不过这有点麻烦。

我只能通过使用

mouseup

事件来实现这一点

代码笔镜像：

newvue({
el:“应用程序”，
数据：{
modalShow：错误
},
安装的（）{
document.addEventListener（“mouseup”，e=>{
设m=`x:${e.clientX}| y:${e.clientY}`；
控制台日志（m）；
})
}
})；

开放模态
你好，来自莫代尔！

你的意思是：嗯，谢谢你，但我不这么认为。这似乎是一个通过事件在组件之间通信的解决方案，对吗？我只想捕获onclick事件，即使在modals中也是如此。如何监听

文档

？在安装的

应用程序中设置侦听器和处理程序是否可行像
document.onclick=（e）=>{console.log（“x:+e.clientX+”y:+e.clientY）}
应该很容易测试…为你想做的事情创建一个方法
doSomething
并在一个挂载的文件中添加一个侦听器并检查它是否工作；-）谢谢，我已经尝试过了（见上面的编辑），但仍然没有捕捉到模式上的点击。我很喜欢你的想法，但onclick不会在模式中触发，与我在问题中描述的功能效果相同。如果页面内容小于视口，则不会在内容之外触发任何点击事件（因为
#app
没有延伸到视口度量）。谢谢，但是使用
setTimeout
我在单击一个元素时触发了23个单击事件。此外，引导模式仍然没有对单击作出反应。我将检查是否向每个模式元素添加单独的
@click
。我想我过去已经这样做了，但让我们尝试一下。谢谢，这很有效！我已经这样做了它以@marvin irwin的方式运行，它正是我想要的。太棒了！很高兴你能找到解决方案。
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)
    }
  });

- <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>

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);
      }
    });
  }
};