iOS-React Native：点击头部返回按钮触发组件onBlur问题求助

通用方案（原生JS/多数框架适配） #

• 利用blur事件的relatedTarget属性做判断：
  当元素是因为点击页面内其他可聚焦元素失焦时，e.relatedTarget会指向那个元素；而页面返回/跳转导致的失焦，relatedTarget通常为null（主流浏览器均支持此逻辑）。只需在blur处理函数里过滤这种情况即可：

  function handleBlur(e) {
    // 跳过页面返回/跳转导致的失焦
    if (!e.relatedTarget) return;
    // 执行你的业务逻辑
    console.log('正常失焦逻辑触发');
  }
  

• 结合popstate事件标记导航状态：
  监听浏览器的前进后退事件，在返回时设置一个临时标记，让blur事件触发时跳过业务逻辑，之后再重置标记避免影响后续操作：

  let isNavigatingBack = false;
  
  window.addEventListener('popstate', () => {
    isNavigatingBack = true;
    // 100ms后重置标记，覆盖多数场景下的跳转延迟
    setTimeout(() => isNavigatingBack = false, 100);
  });
  
  function handleBlur(e) {
    if (isNavigatingBack) return;
    // 你的业务逻辑
  }
  

React 场景优化 #

用useRef维护导航状态，避免全局变量污染：

import { useRef, useEffect } from 'react';

function TargetComponent() {
  const isNavigatingBack = useRef(false);

  useEffect(() => {
    const handlePopState = () => {
      isNavigatingBack.current = true;
      setTimeout(() => isNavigatingBack.current = false, 100);
    };

    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  const handleBlur = (e) => {
    if (isNavigatingBack.current) return;
    // 业务逻辑代码
  };

  return <input onBlur={handleBlur} placeholder="测试输入框" />;
}

Vue 场景优化 #

在组件内用ref维护状态，配合生命周期钩子绑定/解绑事件：

<template>
  <input @blur="handleBlur" placeholder="测试输入框" />
</template>

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

const isNavigatingBack = ref(false);

const handlePopState = () => {
  isNavigatingBack.value = true;
  setTimeout(() => isNavigatingBack.value = false, 100);
};

onMounted(() => window.addEventListener('popstate', handlePopState));
onUnmounted(() => window.removeEventListener('popstate', handlePopState));

const handleBlur = (e) => {
  if (isNavigatingBack.value) return;
  // 业务逻辑代码
};
</script>

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