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

Question

我需要捕获 Vue.js 应用程序中用户触发的所有点击事件。我的第一步是向#appdiv 添加一个 onclick 监听器：

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

这会捕获直接在 App 组件内部发生的所有点击事件。问题是我正在使用 Bootstrap Modal（通过 BootstrapVue 提供），并且我还需要捕获其中的点击。<b-modal></b-modal>即使我在组件上设置另一个 @click 监听器（vue-cli 的语法），这目前也不起作用。

这就是我也尝试过的（在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)
    }
  });

同样的问题，Bootstrap Modals 内的点击不会触发点击事件。

Answer 1

我只能通过使用该mouseup事件来使其发挥作用。

CodePen镜像：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/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/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>