使用jQuery替换文本时多链接场景出现异常问题

这个闪烁问题我之前也碰到过，核心原因通常有两个：

1. 相邻链接元素的鼠标事件（mouseenter/mouseleave）频繁触发，导致标题文本在中英文之间快速切换；
2. 标题文本切换时元素宽度发生变化，使得鼠标相对元素的位置状态反复改变，进一步触发更多事件，形成恶性循环。

解决方案一：固定标题元素尺寸，避免波动 #

先给.article-title设置固定宽度，确保切换文本时元素大小不变，从根源上消除尺寸变化引发的事件异常：

.article-title {
  display: inline-block;
  width: 250px; /* 根据你的布局需求调整宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 文本过长时显示省略号 */
}

解决方案二：用事件委托精准控制事件触发 #

把事件绑定到父容器上，而不是每个语言图标单独绑定，这样能更精准地定位目标元素，减少相邻元素的事件冲突：

// 假设你的所有文章项都放在.article-list容器里
const articleList = document.querySelector('.article-list');

// 鼠标移入语言图标时切换中文标题
articleList.addEventListener('mouseenter', (e) => {
  // 确保触发事件的是语言图标（或其内部元素）
  const langIcon = e.target.closest('.lang-icon');
  if (!langIcon) return;

  const targetTitle = langIcon.closest('.article-item').querySelector('.article-title');
  // 避免重复赋值，减少DOM操作
  if (targetTitle.textContent !== targetTitle.dataset.cnTitle) {
    targetTitle.textContent = targetTitle.dataset.cnTitle;
  }
});

// 鼠标移出时恢复英文标题
articleList.addEventListener('mouseleave', (e) => {
  const langIcon = e.target.closest('.lang-icon');
  if (!langIcon) return;

  const targetTitle = langIcon.closest('.article-item').querySelector('.article-title');
  if (targetTitle.textContent !== targetTitle.dataset.enTitle) {
    targetTitle.textContent = targetTitle.dataset.enTitle;
  }
});

解决方案三：添加防抖处理，过滤频繁触发的事件 #

如果前两个方案还不能完全解决，给事件处理函数加防抖，短时间内只执行一次操作：

// 防抖工具函数
function debounce(func, delay = 80) {
  let timerId;
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => func.apply(this, args), delay);
  };
}

const articleList = document.querySelector('.article-list');

// 包装防抖后的事件处理函数
const handleEnter = debounce((e) => {
  const langIcon = e.target.closest('.lang-icon');
  if (!langIcon) return;

  const targetTitle = langIcon.closest('.article-item').querySelector('.article-title');
  if (targetTitle.textContent !== targetTitle.dataset.cnTitle) {
    targetTitle.textContent = targetTitle.dataset.cnTitle;
  }
});

const handleLeave = debounce((e) => {
  const langIcon = e.target.closest('.lang-icon');
  if (!langIcon) return;

  const targetTitle = langIcon.closest('.article-item').querySelector('.article-title');
  if (targetTitle.textContent !== targetTitle.dataset.enTitle) {
    targetTitle.textContent = targetTitle.dataset.enTitle;
  }
});

// 绑定防抖后的事件
articleList.addEventListener('mouseenter', handleEnter);
articleList.addEventListener('mouseleave', handleLeave);

额外优化：使用Pointer事件替代Mouse事件 #

现代浏览器支持pointerenter/pointerleave事件，它们对鼠标、触摸等输入方式的处理更稳定，能减少事件触发的异常，你可以把上面的mouseenter/mouseleave替换成这两个事件试试。

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