asa*_*sri 10 javascript vue.js vuejs2
使用JQuery,可以捕获页面中任何项目的单击事件,如下所示.
$(document).click(function(event){
// event.target is the clicked element object
});
如何用Vue.js做同样的事情？
Ben*_*ngt 24
然而,如果你不喜欢弄乱你的模板(例如,不要在其中放置很多事件处理程序),或者你的Vue应用程序只是更大应用程序的一小部分,那么手动注册事件处理程序也是完全可以接受的.
要在脚本中添加全局事件处理程序Vue方式,您应该在挂载中注册它们并在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()。它们仅捕获对根应用程序元素的单击，而不捕获整个文档。当然，您可以将root元素设置为height: 100%或其他。但是如果您想确定的话，最好修改Bengt解决方案并将事件侦听器直接附加到document。
new Vue({
...
methods: {
onClick() {},
}
mounted() {
document.addEventListener('click', this.onClick);
},
beforeDestroy() {
document.removeEventListener('click', this.onClick);
},
...
});
请记住，如果出于某种原因需要停止将事件传播到主处理程序，则需要在子元素中使用@ click.stop。
<body><div id='yourMainDiv' @click='yourClickHandler'>在你的VueJS <script>部分中使用它:
方法:{yourClickHandler(event){//按事件//做你想做的任何事情//与你问题中完全相同的对象}}
| 归档时间： |
|
| 查看次数： |
16531 次 |
| 最近记录： |