React按钮onBlur事件在Safari/Firefox失效，及Firefox中onBlur替代方案咨询

Hey there! Let's tackle your two questions one by one, based on real-world fixes and common workarounds from the development community:

First off, onBlur does function in Firefox, but there are scenarios where it might not behave as expected—most notably when dealing with nested elements, since the blur event doesn't bubble up through the DOM. If you're hitting those edge cases, here are reliable alternatives:

• Use onFocusout: Unlike blur, the focusout event bubbles, making it ideal for handling focus loss across parent and child element hierarchies. It's fully supported in Firefox and all modern browsers, so it's a drop-in replacement in many cases.
• Click Outside Detection: If your goal is to trigger an action when the user clicks outside a specific element (a common use case for blur), you can listen for click events on the document and validate whether the target is outside your element. Here's a quick example:

document.addEventListener('click', (e) => {
  const targetElement = document.getElementById('your-target');
  if (!targetElement.contains(e.target)) {
    // Your "blur-like" logic here
  }
});

• Manual Focus State Checks: For specific use cases, you can periodically check if an element has focus using document.activeElement, though this is less efficient than event-based approaches and should be used sparingly.

If your React button's onBlur works seamlessly in Chrome but fails in Safari and Firefox, the issue typically ties to how these browsers handle focus on native buttons or subtle differences in React's synthetic event system. Here are proven fixes:

• Swap onBlur for onFocusout: Just like the standalone Firefox case, onFocusout offers better cross-browser consistency for focus loss events. In React, you can use it directly in your JSX:

<button onFocusout={() => console.log('Button lost focus!')}>
  Click Me
</button>

• Explicitly Set tabindex: While native buttons should be focusable by default, some browser edge cases might prevent this. Adding a tabindex="0" ensures the button can receive focus reliably:

<button tabindex="0" onBlur={() => console.log('Button lost focus!')}>
  Click Me
</button>

• Use React Refs with Native Events: If React's synthetic events are causing inconsistencies, attach a native blur event directly to the button using a ref. This bypasses any synthetic event quirks:

import { useRef, useEffect } from 'react';

function FocusableButton() {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleBlur = () => console.log('Button lost focus!');
    const button = buttonRef.current;
    
    if (button) {
      button.addEventListener('blur', handleBlur);
      // Clean up the event listener on unmount
      return () => button.removeEventListener('blur', handleBlur);
    }
  }, []);

  return <button ref={buttonRef}>Click Me</button>;
}

• Check for Focus-Stealing Elements: Sometimes other UI elements (like modals, dropdowns, or auto-focus inputs) might be programmatically taking focus immediately after the button is clicked, preventing the blur event from firing. Audit your component tree to ensure no other elements are stealing focus unexpectedly.

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