如何跟踪全局点击事件

Vue.js - How to track global click event

本文关键字：全局 事件 跟踪 何跟踪      更新时间：2023-09-26

js并生成了这个代码的弹出窗口，当点击navbar-link元素时，popover将显示或隐藏。什么会很好是关闭popover时，我点击屏幕上的任何地方(如果弹出窗口打开)。

有什么办法吗?

<template>
  <div>
    <span class="navbar-link" v-on:click="toggle()">
      <i class="ion-android-notifications-none"></i>
    </span>
    <div class="popover" v-bind:class="{ 'open': opened }">
      Hello, world!
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        opened: false
      }
    },
    methods: {
      toggle: function () {
        this.opened = !this.opened;
      }
    }
  }
</script>

提前感谢:)

你仍然可以使用全局js函数并将事件绑定到document元素:

export default {
    data () {
        return {
            opened: false
        }
    },
    methods: {
        toggle () {
            if (this.opened) {
                return this.hide()
            }
            return this.show()
        },
        show () {
            this.opened = true;
            setTimeout(() => document.addEventListener('click',this.hide), 0);
        },
        hide () {
            this.opened = false;
            document.removeEventListener('click',this.hide);
        }
    }
}

使用此解决方案，单击弹出窗口也将关闭它。所以你需要停止在弹出窗口上传播点击事件:

<div class="popover" v-bind:class="{ 'open': opened }" @click.stop>
    Hello, world!
</div>
相关文章：