JavaScript实现图片跟随文本块时mousepointer移动异常问题求助

Let's break down why your title block is behaving jittery when moving right or vertically, and fix those issues step by step.

Root Causes of the Glitches #

1. Event Listener Bound to Document: When you attach mousemove to the entire document, the event triggers even when your mouse is over the title block itself. Since the title block is moving with the mouse, this creates a loop: moving the title block triggers a new mousemove event, which recalculates the position, causing the jumpy effect.
2. Incorrect Position Calculation: Using e.offsetY with a document-level event gives you the position relative to the entire document, not the image. When the mouse moves vertically, this mismatch makes the title block jump between the cursor and the image's top.
3. Frequent Display Property Changes: Toggling display: none/block on every mousemove forces the browser to constantly re-render the element, adding to the jitter.

Fixed Solution #

Here's how to adjust your code and CSS to smooth out the movement:

Step 1: Refine Event Listeners

Bind events directly to the image instead of the document, and separate show/hide logic from position updates:

const objectnaam = 'roel-image-twee-eiken-desktop-tablet';
const imageItSelf = document.getElementById(objectnaam);
const titleblock = document.getElementById(objectnaam + '_id');

// Show titleblock when entering the image
imageItSelf.addEventListener('mouseover', () => {
  titleblock.style.setProperty('display', 'block', 'important');
});

// Hide titleblock when leaving the image
imageItSelf.addEventListener('mouseout', () => {
  titleblock.style.setProperty('display', 'none', 'important');
});

// Only update position when moving over the image
imageItSelf.addEventListener('mousemove', mousemovedimage);

Step 2: Fix Position Calculation

Update your mousemovedimage function to use relative positions from the image itself:

function mousemovedimage(e) { 
  // offsetX/Y are relative to the image since we bound the event to it
  const xpos = e.offsetX;
  const ypos = e.offsetY;

  // Optional: Keep titleblock within image bounds (mouseover already limits this, but just in case)
  if (xpos >= 0 && xpos <= e.target.clientWidth) {
    titleblock.style.left = `${xpos}px`;
    titleblock.style.top = `${ypos}px`;
  }
}

Step 3: Critical CSS Adjustments

Make sure your titleblock is positioned correctly and doesn't block mouse events:

/* Ensure the image is a positioning container for the titleblock */
#roel-image-twee-eiken-desktop-tablet {
  position: relative;
}

/* Style the titleblock to follow the mouse */
#roel-image-twee-eiken-desktop-tablet_id {
  position: absolute;
  display: none;
  pointer-events: none; /* Let mouse events pass through to the image */
  /* Add your other styles (background, padding, etc.) here */
}

Why This Works #

• Image-Bound Events: By limiting mousemove to the image, we avoid unintended triggers from the title block or other page elements.
• Pointer Events None: This ensures the title block doesn't "steal" the mouse event—even when your cursor is over the text, the image still receives the mousemove signal to update the position.
• Simplified Positioning: Using offsetX/Y directly gives us the exact position relative to the image, eliminating the need for error-prone clientX minus offset calculations.
• Separate Show/Hide: Toggling display only on mouseover/mouseout reduces unnecessary browser rendering, making the movement smoother.

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