如何通过Pan Gesture实现容器内HTML元素的悬停效果？

我之前也踩过这个坑！用Hammer.js做这类滑过悬停效果时，确实容易因为封装层的限制或者事件触发逻辑导致卡顿，要达到像移动端键盘那样丝滑的体验，得从优化现有方案或者换原生实现入手，给你分享几个实用的思路：

先试试优化Hammer.js的配置 #

如果不想换掉Hammer.js，可以先调整这几个关键点，大概率能提升流畅度：

• 降低手势触发门槛，把threshold设为0，让手指一接触就触发pan事件，避免延迟：

  const hammer = new Hammer(container, {
    pan: { direction: Hammer.DIRECTION_ALL, threshold: 0 },
    touchAction: 'none' // 阻止浏览器默认触摸行为，避免手势被干扰
  });
  

• 提前缓存元素和位置，别在panmove里实时查DOM：
  把容器内的目标元素和它们的位置信息提前存好，每次手势移动时直接计算触摸点是否在元素范围内，比实时调用querySelector或getBoundingClientRect快太多：

  const targetElements = Array.from(container.querySelectorAll('.target-item'));
  let elementBounds = targetElements.map(el => el.getBoundingClientRect());
  
  // 窗口 resize 时更新位置，避免元素偏移
  window.addEventListener('resize', () => {
    elementBounds = targetElements.map(el => el.getBoundingClientRect());
  });
  
  hammer.on('panmove', (e) => {
    const touchX = e.center.x;
    const touchY = e.center.y;
    targetElements.forEach((el, index) => {
      const bounds = elementBounds[index];
      const isHovered = touchX >= bounds.left && touchX <= bounds.right && touchY >= bounds.top && touchY <= bounds.bottom;
      el.classList.toggle('hovered', isHovered);
    });
  });
  

• 补上panstart和panend的状态重置，避免悬停状态残留：

  hammer.on('panstart', () => {
    targetElements.forEach(el => el.classList.remove('hovered'));
  });
  hammer.on('panend', () => {
    targetElements.forEach(el => el.classList.remove('hovered'));
  });
  

原生触摸事件实现（更丝滑的终极方案） #

如果Hammer.js的优化还是达不到预期，直接用原生触摸事件会更灵活——毕竟少了一层封装的开销，能精准控制每一步：

const container = document.getElementById('container');
let targetElements = [];
let elementBounds = [];

// 初始化缓存元素和位置
function initHoverTargets() {
  targetElements = Array.from(container.querySelectorAll('.target-item'));
  elementBounds = targetElements.map(el => el.getBoundingClientRect());
}

// 监听窗口变化，更新元素位置
window.addEventListener('resize', initHoverTargets);
initHoverTargets();

// 触摸开始时初始化状态
container.addEventListener('touchstart', (e) => {
  e.preventDefault(); // 必须阻止默认行为，避免滚动/缩放干扰手势
  targetElements.forEach(el => el.classList.remove('hovered'));
  checkCurrentHover(e.touches[0]);
});

// 触摸移动时实时检测
container.addEventListener('touchmove', (e) => {
  e.preventDefault();
  checkCurrentHover(e.touches[0]);
});

// 触摸结束时清除所有悬停状态
container.addEventListener('touchend', () => {
  targetElements.forEach(el => el.classList.remove('hovered'));
});

// 核心：检测触摸点所在的元素
function checkCurrentHover(touch) {
  const touchX = touch.clientX;
  const touchY = touch.clientY;
  targetElements.forEach((el, index) => {
    const bounds = elementBounds[index];
    const isHovered = touchX >= bounds.left && touchX <= bounds.right && touchY >= bounds.top && touchY <= bounds.bottom;
    el.classList.toggle('hovered', isHovered);
  });
}

另外，CSS也要配合优化，尽量用GPU加速的属性做过渡，避免重绘卡顿：

.target-item {
  transition: background-color 0.1s ease, transform 0.05s ease;
  /* 开启GPU加速，减少卡顿 */
  will-change: background-color, transform;
}
.target-item.hovered {
  background-color: #f0f0f0;
  transform: scale(1.03);
}

几个关键注意点 #

• 一定要在触摸事件里调用e.preventDefault()，否则浏览器的默认滚动、缩放会打断手势，导致事件触发不连续
• 动态生成元素后，记得重新调用initHoverTargets()更新缓存
• 如果元素数量很多，可以优化检测逻辑：只在上一次悬停的元素附近查找，不用遍历全部，能进一步提升速度

亲测原生方案基本能达到和移动端键盘一样的丝滑效果，手指滑过的时候元素悬停状态切换几乎没有延迟。

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