Ag-Grid React onCellMouseOut事件触发异常求助

Hey there! Let’s work through your Ag-Grid issues step by step—those unreliable mouseout events and broken checkbox selections are definitely frustrating, but we’ve got solid fixes for both.

First, why are you running into these problems? #

• The global onCellMouseOver/onCellMouseOut callbacks depend on Ag-Grid's event bubbling system. If you move your mouse fast enough or trigger a cell redraw, those events can slip through the cracks and fail to fire.
• When you redraw entire rows to show/hide your text, you’re resetting the cell’s DOM state completely—this wipes out any checkbox selections the user made, which is why that feature breaks.

Fix 1: Ditch global events for cell-local listeners #

Instead of relying on grid-wide callbacks, handle hover events directly inside a custom cell renderer. This way, every cell manages its own hover state, no more missed events, and you won’t need to redraw anything.

Here’s a sample renderer that adds hover text without breaking checkboxes:

const HoverTextCellRenderer = (params) => {
  // Build the cell container
  const cellContainer = document.createElement('div');
  cellContainer.style.position = 'relative';

  // Your regular cell content
  const mainContent = document.createElement('span');
  mainContent.textContent = params.value;

  // The hover-only text element (hidden by default)
  const hoverTooltip = document.createElement('div');
  hoverTooltip.textContent = params.data.hoverText; // Replace with your target text source
  hoverTooltip.style.cssText = `
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border: 1px solid #cccccc;
    padding: 4px 8px;
    display: none;
    z-index: 1000;
    white-space: nowrap;
  `;

  // Add local mouse event listeners
  cellContainer.addEventListener('mouseover', () => {
    hoverTooltip.style.display = 'block';
  });

  cellContainer.addEventListener('mouseout', () => {
    hoverTooltip.style.display = 'none';
  });

  // Assemble the cell
  cellContainer.appendChild(mainContent);
  cellContainer.appendChild(hoverTooltip);

  return cellContainer;
};

Then use this renderer in your column definition:

const columnDefs = [
  { field: 'yourFieldName', cellRenderer: HoverTextCellRenderer },
  // Keep your checkbox column as-is—no more redraws mean selections stay intact
  { field: 'select', headerCheckboxSelection: true, checkboxSelection: true }
];

Fix 2: If you need row-wide hover text #

If your goal is to show text when hovering over any cell in the row (not just one cell), you can attach listeners directly to the row elements instead. Just make sure to handle dynamic row rendering (like scrolling or pagination) so new rows get the listeners too.

Add this in your onGridReady callback:

const onGridReady = (params) => {
  const gridApi = params.api;

  // Attach listeners to existing rows
  const bindRowHoverEvents = () => {
    gridApi.forEachNode(node => {
      const rowElement = node.rowNode.el;
      
      rowElement.addEventListener('mouseover', (event) => {
        // Create and position your row-wide hover text
        const rowTooltip = document.createElement('div');
        rowTooltip.id = `row-tooltip-${node.rowIndex}`;
        rowTooltip.textContent = node.data.rowHoverText; // Your row-specific text
        rowTooltip.style.cssText = `
          position: fixed;
          background: #fff;
          border: 1px solid #ccc;
          padding: 4px 8px;
          z-index: 1000;
          left: ${event.clientX + 10}px;
          top: ${event.clientY + 10}px;
        `;
        document.body.appendChild(rowTooltip);
      });

      rowElement.addEventListener('mouseout', () => {
        // Clean up the tooltip when leaving the row
        const rowTooltip = document.getElementById(`row-tooltip-${node.rowIndex}`);
        if (rowTooltip) rowTooltip.remove();
      });
    });
  };

  // Bind initial rows
  bindRowHoverEvents();

  // Re-bind when rows change (for pagination/scrolling)
  gridApi.addEventListener('rowDataChanged', bindRowHoverEvents);
};

Key Takeaway #

Never use refreshCells to toggle UI elements—it’s a sledgehammer that resets everything in the cell. Instead, manipulate the DOM directly or use CSS classes to show/hide content. And ditching global grid events for local cell/row listeners will fix those missing mouseout triggers for good.

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