如何判断浏览器标签选中状态并仅执行一次JavaScript代码？

嘿，我之前在Vue项目里也碰到过一模一样的问题！用focus事件切换标签时，原活跃标签和新选中标签都会触发，确实挺烦人的。给你几个亲测有效的解决方案：

方案一：改用页面可见性事件（最推荐） #

visibilitychange事件是专门针对页面可见状态变化的，只有当标签页从不可见变为可见时才会触发，完美避开原标签的触发问题。在Vue里可以这么实现：

<script setup>
import { onMounted, onUnmounted } from 'vue';

const handleVisibilityChange = () => {
  if (document.visibilityState === 'visible') {
    // 这里写你要执行的逻辑，只会在当前选中的标签页触发一次
    console.log('当前标签页已激活，执行一次逻辑');
  }
};

onMounted(() => {
  document.addEventListener('visibilitychange', handleVisibilityChange);
});

onUnmounted(() => {
  document.removeEventListener('visibilitychange', handleVisibilityChange);
});
</script>

这个方法完全贴合你的需求，不管是切换标签、从浏览器外（桌面/IDE）切回浏览器，只会在目标标签触发一次逻辑。

方案二：状态标记+防抖控制 #

如果一定要用focus事件，可以通过状态标记配合防抖来过滤重复触发。在Vue里维护一个当前页面是否处于聚焦状态的变量，就能精准控制逻辑执行时机：

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 自己实现简单的防抖函数，不用依赖第三方库
const debounce = (fn, delay) => {
  let timer = null;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
};

const isPageFocused = ref(document.hasFocus());

const handlePageFocus = debounce(() => {
  if (!isPageFocused.value && document.hasFocus()) {
    isPageFocused.value = true;
    // 执行你的逻辑
    console.log('仅执行一次的逻辑');
  }
}, 100);

const handlePageBlur = () => {
  isPageFocused.value = false;
};

onMounted(() => {
  window.addEventListener('focus', handlePageFocus);
  window.addEventListener('blur', handlePageBlur);
});

onUnmounted(() => {
  window.removeEventListener('focus', handlePageFocus);
  window.removeEventListener('blur', handlePageBlur);
});
</script>

防抖用来过滤短时间内的重复触发，状态标记则确保只有从「非聚焦→聚焦」的切换才会执行逻辑。

方案三：非JS小技巧（隐藏输入框聚焦） #

你提到的非JS方案，其实可以用一个隐藏的输入框来模拟：页面加载时让这个隐藏输入框自动获取焦点，然后监听它的focus事件。因为只有当前激活的标签页里的输入框能真正获得焦点，切换时不会出现重复触发的情况：

<template>
  <input 
    ref="hiddenInput" 
    type="text" 
    style="position: fixed; left: -9999px; top: -9999px; opacity: 0;"
    @focus="handleFocus"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const hiddenInput = ref(null);

const handleFocus = () => {
  // 这里的逻辑只会在当前标签页激活时触发
  console.log('标签页激活，执行一次');
};

onMounted(() => {
  hiddenInput.value?.focus();
  // 浏览器窗口激活时，重新聚焦隐藏输入框
  window.addEventListener('focus', () => {
    hiddenInput.value?.focus();
  });
});
</script>

这个方法比较巧妙，不需要依赖复杂的事件判断，适合一些简单场景。

内容的提问来源于stack exchange，提问作者O Connor