Vue 点击空白处触发事件 - 完整指南及代码示例

<template>
  <div id="app" @click.stop="handleClickOutside">
    <!-- ...其他内容... -->
  </div>
</template>
<script>
export default {
  methods: {
    handleClickOutside(event) {
      // 判断点击的目标元素是否是空白区域
      if (!event.target.closest("#app")) {
        // 点击空白处的逻辑处理
        console.log("点击了空白区域");
      }
    },
  },
};
</script>
<p>在 Vue 中，你可以使用@click事件监听器来监听点击事件。要实现点击空白处触发事件的效果，你可以在应用的根元素上添加一个@click事件监听器，并使用事件修饰符.stop阻止事件冒泡。然后，在点击事件处理函数中判断点击的目标元素是否是空白区域，如果是，则执行相应的逻辑。</p>
<p>在这个示例中，我们在根元素<code>&lt;div id=&quot;app&quot;&gt;</code>上添加了@click事件监听器，并在事件处理函数<code>handleClickOutside</code>中判断了点击的目标元素是否是空白区域（即不包含在<code>&lt;div id=&quot;app&quot;&gt;</code>内部）。如果是空白区域，则执行相应的逻辑，这里只是简单地输出了一条提示信息。</p>
<p>需要注意的是，这里使用了<code>event.target.closest(&quot;#app&quot;)</code>来判断点击的目标元素是否是根元素或其子元素。<code>closest</code>方法用于获取离当前元素最近的指定选择器的祖先元素，如果找不到匹配的祖先元素，则返回<code>null</code>。</p>