问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Vue.js 调用整页文档的点击事件

社区维基
1
新手上路，请多包涵

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

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

如何对 Vue.js 做同样的事情？

原文由 asankasri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptvue.jsvuejs2
阅读 572
2 个回答
得票最新
社区维基
1
✓ 已被采纳
  1. 在 <body> 之后创建 div 作为顶部节点
  2. 使其成为主容器并在其上安装 VueJS。
  3. <div id='yourMainDiv' @click='yourClickHandler'>
  4. 在你的 VueJS <script> 部分使用它：
 methods: {
  yourClickHandler(event) {
    // event.target is the clicked element object
  }
}

原文由 Marek Urbanowicz 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

MU提供的答案 是正确且有效的。

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

要 以 Vue 的方式在脚本中 添加全局事件处理程序，您应该在 mount 中注册它们并在 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)
    }
  }
})

原文由 Bengt 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题