React中<object>标签鼠标事件无法捕获，JSX绑定失效原因咨询

Great question—this is one of those tricky edge cases where React's event handling model clashes with how certain HTML elements behave. Let's break down exactly what's happening:

1. React Uses Synthetic Events (Not Direct DOM Binding) #

First, remember that React doesn't attach event listeners directly to DOM elements like plain HTML does. Instead, it uses a synthetic event system that delegates all events to the root of your application (or a parent container). This is part of what makes React's event handling efficient and consistent across browsers.

But here's the catch: the <object> tag is a replaced element. It's designed to embed external content (like PDFs, SVGs, or legacy plugins) which runs in its own separate browsing context. When you interact with this embedded content, the mouse events might be intercepted by that context and never bubble up to the parent DOM tree where React's event delegator is listening.

2. Plain HTML Works Because It Binds Directly to the Element #

In vanilla HTML, when you write <object onmousedown="handleClick()">, you're attaching the event listener directly to the <object> DOM node itself. Even if the embedded content doesn't bubble events, the element's own node can still catch events that hit its "border" or areas where the embedded content doesn't consume the event. React's delegated approach misses these because the event never reaches the root delegator.

3. Why Wrapping in a <div> Works #

A regular <div> doesn't create a separate browsing context. Mouse events on or inside the div bubble normally up the DOM tree, so React's synthetic event system can catch them at the delegator level. The div acts as a "proxy" for the events that the <object> can't pass through to React's system.

Fixing the Issue: Use Native DOM Event Listeners #

To get mouse events working on a React <object> tag, you need to bypass the synthetic event system and attach a native event listener directly to the DOM element. Here's how to do it with hooks:

import { useRef, useEffect } from 'react';

function EmbeddedContent() {
  const objectRef = useRef(null);

  useEffect(() => {
    const handleMouseDown = () => {
      console.log('Mouse down detected on object!');
    };

    const element = objectRef.current;
    if (element) {
      element.addEventListener('mousedown', handleMouseDown);
      // Clean up the listener on unmount
      return () => element.removeEventListener('mousedown', handleMouseDown);
    }
  }, []);

  return <object ref={objectRef} data="your-content.pdf" type="application/pdf"></object>;
}

This approach directly attaches the listener to the <object> DOM node, just like plain HTML does, so it can catch events that would otherwise be lost to the embedded content's context.

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