particles.js鼠标检测失效咨询：HTML元素遮挡canvas的解决方案

架构老林

2026-5-25

Hey there! Let's figure out how to fix that mouse interaction issue with particles.js when other HTML elements are added to your page. The core problem here is that those overlay elements are blocking mouse events from reaching the particles canvas—so let's break down practical solutions:

Solution 1: Let Mouse Events Pass Through Overlay Elements (Simplest Fix)

Most of the time, your overlay content doesn't need to block all mouse events. You can use CSS to make non-interactive elements "transparent" to mouse events, letting them pass down to the canvas:

/* Apply this to your top-level content wrapper */
.page-content-wrapper {
  pointer-events: none;
}

/* Re-enable pointer events for elements that need interaction (buttons, links, inputs) */
.page-content-wrapper a,
.page-content-wrapper button,
.page-content-wrapper input {
  pointer-events: auto;
}

This way, particles.js gets all the mouse events it needs, while your interactive elements still work as expected.

Solution 2: Manually Forward Mouse Events to the Canvas

If the first approach doesn't fit (like if you have a ton of interactive elements to whitelist), you can listen for mouse events on the document or a parent container, then manually send them to the particles canvas. This ensures the canvas always gets the event data, even if other elements are in the way.

Here's a code example:

// Grab the particles canvas element
const particlesCanvas = document.querySelector('#particles-js canvas');

// Helper function to forward mouse events
function forwardMouseEvent(eventType) {
  document.addEventListener(eventType, (e) => {
    // Calculate coordinates relative to the canvas (critical if canvas isn't full-screen or page scrolls)
    const canvasRect = particlesCanvas.getBoundingClientRect();
    const relativeX = e.clientX - canvasRect.left;
    const relativeY = e.clientY - canvasRect.top;

    // Create a new mouse event tailored to the canvas
    const forwardedEvent = new MouseEvent(eventType, {
      clientX: relativeX,
      clientY: relativeY,
      bubbles: true,
      cancelable: true
    });

    // Send the event to the canvas
    particlesCanvas.dispatchEvent(forwardedEvent);
  });
}

// Forward key mouse events
forwardMouseEvent('mousemove');
forwardMouseEvent('click');
forwardMouseEvent('mouseleave');

Solution 3: Bind Particles.js Events to a Parent Container

Check if your version of particles.js lets you specify a custom target for interaction events. Instead of binding to the canvas or window, you can bind to a parent container that wraps both the canvas and your overlay content. This way, any mouse event inside that container triggers particles.js, regardless of which element is on top.

Example configuration:

particlesJS('particles-js', {
  // ... your existing particles config ...
  interactivity: {
    events: {
      onHover: {
        enable: true,
        mode: 'grab',
        target: document.querySelector('#particles-container') // Parent wrapper
      },
      onClick: {
        enable: true,
        mode: 'push',
        target: document.querySelector('#particles-container')
      }
    }
  }
});

Note: If your particles.js version doesn't support the target option, you might need to use a forked version or tweak the library's source code to add this functionality.

Start with Solution 1—it's the cleanest and easiest to implement for most cases. If you have complex interactive elements, move to Solution 2. Solution 3 works great if you can adjust the particles.js config to support it.

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