使用JQuery，可以捕获页面中任意项的点击事件，如下所示。
$(document).click(function(event){
// event.target is the clicked element object
});
如何用 Vue.js 做同样的事情？
【问题讨论】：
Vue.js 只是 JavaScript，我很确定你不能在 document 上挂载 Vue 实例；它只能安装在一个元素上
标签： javascript vue.js vuejs2
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)
}
}
})
【讨论】：
提供的所有答案都有效，但没有一个能模仿$(document).click() 的真实行为。它们仅捕获对根应用程序元素的单击，而不是对整个文档的单击。当然，您可以将根元素设置为 height: 100% 或其他内容。但如果您想确定，最好修改Bengt 解决方案并将事件侦听器直接附加到document。
new Vue({
...
methods: {
onClick() {},
}
mounted() {
document.addEventListener('click', this.onClick);
},
beforeDestroy() {
document.removeEventListener('click', this.onClick);
},
...
});
请记住，如果您出于某种原因需要停止将事件传播到主处理程序，则需要在子元素中使用 @click.stop。
【讨论】：
<body>之后创建div作为顶部节点
<div id='yourMainDiv' @click='yourClickHandler'><script> 部分使用它：methods: {
yourClickHandler(event) {
// event.target is the clicked element object
}
}
【讨论】：
另外，如果您需要跟踪特定元素之外的点击事件，您可以 可以使用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';
},
},
});
【讨论】：