JS onmousemove用clientX/clientY实现tooltip重复调用失效问题

这个tooltip跟随失效和clientX/clientY属性完全无关，这两个是鼠标事件的标准只读属性，不存在多次调用就失效的问题。失效核心来自逻辑和样式的冲突：

• 你用的window.onmousemove属于DOM0级事件绑定，重复执行这段代码时，后绑定的处理函数会直接覆盖前一次的逻辑，只要第二次绑定的函数存在问题，原本正常的跟随效果就会失效。
• CSS里给tooltip加了display: none !important，hover状态才强制显示，但JS逻辑会无差别给所有匹配到的tooltip（包括隐藏状态的）设置坐标，隐藏的tooltip如果层级过高挡住触发区域，会直接打断元素的:hover状态，表现为提示不显示、不跟随。
• 给tooltip设置position: fixed时没有指定更高的层级，很容易被其他页面元素遮挡，视觉上就像功能失效。

鼠标事件对象上同类型的坐标属性共有3组，核心区别是参考坐标系不同，可以根据定位场景选择：

• pageX/pageY：以整个渲染文档的左上角为参考原点，会自动计算页面滚动的偏移量，如果tooltip用position: absolute定位，用这组属性不需要额外加滚动偏移值。
• screenX/screenY：以用户设备屏幕的左上角为参考原点，一般用于拖拽窗口、屏幕边缘判定这类场景，普通tooltip跟随基本用不上。
• offsetX/offsetY：以触发鼠标事件的DOM元素本身的内边距左上角为参考原点，适合做元素内部的局部跟随效果，全局tooltip场景不适用。

JS代码 #

// 改用DOM2级事件绑定，避免重复绑定覆盖原有逻辑
const tooltipList = document.querySelectorAll('.content-section-text + section');
window.addEventListener('mousemove', function(e) {
  const followOffset = 5;
  const posX = `${e.clientX + followOffset}px`;
  const posY = `${e.clientY + followOffset}px`;
  tooltipList.forEach(tooltip => {
    // 只给当前处于显示状态的tooltip更新坐标，减少无效DOM操作
    if (getComputedStyle(tooltip).display !== 'none') {
      tooltip.style.left = posX;
      tooltip.style.top = posY;
    }
  })
})

CSS代码 #

.content-section-text {
  position: relative;
  cursor: default;
}

.content-section-text + section {
  display: none;
  background-color: #ECECEC;
  color: #4D4E53;
  font-size: 12px;
  padding: 4px 8px 4px 9px;
  position: fixed;
  /* 提高层级避免被其他元素遮挡 */
  z-index: 9999;
  /* 让tooltip本身不响应鼠标事件，避免打断触发元素的hover状态 */
  pointer-events: none;
}

.content-section-text:hover + section {
  display: block;
}

注意：删掉原有代码里的!important强制权重，现有选择器优先级足够生效，滥用!important反而会阻碍JS对样式的正常修改。

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