Question

使用 JQuery ，可以捕获页面中任何项目的点击事件，如下所示。

$(document).click(function(event){
     // event.target is the clicked element object
});

如何对 Vue.js 进行同样的操作？

Answer 1

answer provided by M U是正确无误的。

然而，如果你不喜欢弄乱你的模板（例如，不要在其中放入大量的事件处理程序），或者你的Vue应用程序只是更大应用程序的一小部分，那么注册事件处理程序也是完全可以接受的手动

要在脚本中添加全局事件处理程序 Vue方式，您应该在mounted中注册它们，并在beforeDestroy挂钩中删除它们。

简短的例子：

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

Answer 2

在<body>
制作主容器。
将VueJS装载到那个。
<div id='yourMainDiv' @click='yourClickHandler'>
在您的VueJS <script>部分中使用它：

方法：{ yourClickHandler（event）{ //用事件做你想做的事 //这与您的问题中的对象完全相同 } }

Answer 3

此外，如果您需要跟踪特定元素之外的点击事件，那么您可以使用vue-clickaway组件。 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';
    },
  },
});

Answer 4

所提供的所有答案都有效，但它们都没有模仿$(document).click()的真实行为。它们只捕获根应用程序元素的单击，但不捕获整个文档。当然，您可以将根元素设置为height: 100%或其他内容。但是如果您想确定，最好修改Bengt解决方案并将事件监听器直接附加到文档。

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

如果由于某种原因需要停止事件传播到主处理程序，请记住您需要在子元素中使用 @ click.stop 。

Vue.js +调用整页文档的click事件

4 个答案: