JavaScript触摸事件：如何实现手指划过子元素时触发事件

鼠标交互里，按住鼠标拖动划过子元素能通过mouseover触发选中，但触摸场景下没有原生的类似事件，你可以通过以下方式实现相同效果：

• 监听touchstart事件，记录初始触摸状态，同时阻止浏览器默认滚动行为避免干扰
• 在touchmove事件中，用document.elementFromPoint()获取当前触摸点下的元素
• 维护一个变量记录上一次触发的元素，防止重复执行选中逻辑
• 当检测到当前元素和上一次不同时，手动执行你的选中/取消选中逻辑

示例代码 #

let lastActiveElement = null;
const targetContainer = document.querySelector('.your-container-class');

// 触摸开始初始化
targetContainer.addEventListener('touchstart', (e) => {
  e.preventDefault();
  const touchPoint = e.touches[0];
  lastActiveElement = document.elementFromPoint(touchPoint.clientX, touchPoint.clientY);
  // 可选：给初始触摸的元素添加选中状态
  if (lastActiveElement) {
    lastActiveElement.classList.add('selected');
  }
});

// 触摸移动时检测元素变化
targetContainer.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const touchPoint = e.touches[0];
  const currentElement = document.elementFromPoint(touchPoint.clientX, touchPoint.clientY);

  if (currentElement && currentElement !== lastActiveElement) {
    // 取消上一个元素的选中状态
    if (lastActiveElement) {
      lastActiveElement.classList.remove('selected');
    }
    // 给当前元素添加选中状态
    currentElement.classList.add('selected');
    lastActiveElement = currentElement;
  }
});

// 触摸结束重置状态
targetContainer.addEventListener('touchend', () => {
  lastActiveElement = null;
});

注意事项 #

• 一定要在touchstart和touchmove里调用e.preventDefault()，否则页面滚动会导致触摸坐标偏移，无法准确获取元素
• elementFromPoint()会返回触摸点最上层的元素，确保子元素没有被其他元素完全遮挡
• 如果你的子元素设置了pointer-events: none，需要先调整这个属性，否则无法被检测到

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