React项目中为Syncfusion PDF渲染的Canvas添加onMouseEnter事件方案

1. 事件委托（最优选择） #

利用事件冒泡机制，只在包含所有canvas的父容器上绑定一次mouseenter事件，不用给每个canvas单独绑定，完全避开虚拟DOM的冲突问题，还能自动适配canvas的动态增减（比如PDF页数变化）。

具体实现步骤：

• 给父容器添加React ref，用来获取真实DOM节点
• 在useEffect中给父容器绑定mouseenter事件，通过event.target判断触发事件的是不是canvas元素
• 组件卸载时记得移除事件监听，避免内存泄漏

代码示例：

import { useRef, useEffect } from 'react';

function PdfViewer() {
  const pdfContainerRef = useRef(null);

  useEffect(() => {
    const handleMouseEnter = (e) => {
      // 确认触发事件的是canvas元素
      if (e.target.tagName.toLowerCase() === 'canvas') {
        // 这里写你的逻辑，比如获取当前canvas对应的页码
        console.log('鼠标进入canvas:', e.target);
      }
    };

    const container = pdfContainerRef.current;
    if (container) {
      container.addEventListener('mouseenter', handleMouseEnter);
    }

    // 清理函数
    return () => {
      if (container) {
        container.removeEventListener('mouseenter', handleMouseEnter);
      }
    };
  }, []); // 依赖为空，只在挂载/卸载时执行

  return (
    <div ref={pdfContainerRef}>
      {/* Syncfusion的PDF渲染组件放在这里 */}
    </div>
  );
}

2. 直接给canvas绑定事件（次选） #

如果必须给每个canvas单独绑定，可以等Syncfusion渲染完成后，通过ref遍历父容器下的所有canvas元素，逐个添加事件监听。但要注意：

• 必须确保PDF已经渲染完成（比如监听Syncfusion的加载完成事件，或者依赖PDF的页数状态）
• 组件更新时（比如切换PDF）要重新绑定事件，同时清理旧的监听

代码示例：

import { useRef, useEffect, useState } from 'react';

function PdfViewer() {
  const pdfContainerRef = useRef(null);
  // 用状态记录PDF是否加载完成
  const [isPdfLoaded, setIsPdfLoaded] = useState(false);

  useEffect(() => {
    if (!isPdfLoaded || !pdfContainerRef.current) return;

    const canvases = pdfContainerRef.current.querySelectorAll('canvas');
    const handleMouseEnter = (e) => {
      console.log('鼠标进入canvas:', e.target);
    };

    canvases.forEach(canvas => {
      canvas.addEventListener('mouseenter', handleMouseEnter);
    });

    // 清理函数
    return () => {
      canvases.forEach(canvas => {
        canvas.removeEventListener('mouseenter', handleMouseEnter);
      });
    };
  }, [isPdfLoaded]); // 依赖PDF加载状态，加载完成后执行

  // 监听Syncfusion组件的加载完成事件，更新状态
  const onPdfLoaded = () => {
    setIsPdfLoaded(true);
  };

  return (
    <div ref={pdfContainerRef}>
      <SyncfusionPdfViewer onLoaded={onPdfLoaded} />
    </div>
  );
}

React确实推荐通过合成事件处理，但只要你正确清理事件监听，避免内存泄漏，直接操作DOM绑定原生事件是完全安全的。事件委托方案因为只绑定一次，还能减少DOM操作，比逐个绑定更高效，也更适配动态变化的子元素。

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