Javascript Vue.js + 调用整个页面文档的点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41950432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js + Call the click event for whole page document
提问by asankasri
With JQuery, click event of the any item in the page can be captured as below.
使用JQuery，可以捕获页面中任何项目的单击事件，如下所示。
$(document).click(function(event){
// event.target is the clicked element object
});
How to do the same with Vue.js?
如何用Vue.js做同样的事情？
采纳答案by Marek Urbanowicz
- Create div as top node, right after
<body> - Make it main container and mount VueJS on it.
<div id='yourMainDiv' @click='yourClickHandler'>- In your VueJS
<script>part use it:
- 创建 div 作为顶部节点，紧随其后
<body> - 使其成为主容器并在其上挂载 VueJS。
<div id='yourMainDiv' @click='yourClickHandler'>- 在你的 VueJS
<script>部分使用它：
methods: {
yourClickHandler(event) {
// event.target is the clicked element object
}
}
回答by Bengt
The answer provided by M Uis correct and works.
Yet if you don't like messing with your template (e.g. not put a lot of event handlers in it) or your Vue app is only a small part of a bigger application, it's also perfectly fine and acceptable to register event handlers manually.
但是，如果您不喜欢弄乱模板（例如，不要在其中放置大量事件处理程序）或者您的 Vue 应用程序只是更大应用程序的一小部分，那么手动注册事件处理程序也完全没问题并且可以接受。
To add global event handlers in your script the Vue wayyou should register them in the mountedand remove them in the beforeDestroyhooks.
要以 Vue 的方式在脚本中添加全局事件处理程序，您应该在挂载中注册它们并在beforeDestroy钩子中删除它们。
Short example:
简短示例：
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)
}
}
})
回答by xpuu
All of the answers provided works, but none of them mimic the real behavior of $(document).click(). They catch just clicks on the root application element, but not on the whole document. Of course you can set your root element to height: 100%or something. But in case you want to be sure, it's better to modify Bengtsolution and attach event listener directly to document.
提供的所有答案都有效，但没有一个能模仿$(document).click(). 它们只捕获对根应用程序元素的点击，而不是对整个文档的点击。当然，您可以将根元素设置为height: 100%或其他内容。但如果您想确定，最好修改Bengt解决方案并将事件侦听器直接附加到document。
new Vue({
...
methods: {
onClick() {},
}
mounted() {
document.addEventListener('click', this.onClick);
},
beforeDestroy() {
document.removeEventListener('click', this.onClick);
},
...
});
Remember you need to use @click.stopin children elements if you for some reason need to stop event propagation to the main handler.
请记住，如果出于某种原因需要停止将事件传播到主处理程序，则需要在子元素中使用@click.stop。
回答by Kirill Freiman
Also, if you need to track click event outside of specific element, you can use vue-clickawaycomponent. Example from the demo:
此外，如果您需要跟踪特定元素之外的点击事件，您可以使用vue-clickaway组件。从实施例演示：
<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';
},
},
});
