如何实现拖拽Tabs组件后阻止点击事件触发？

你的需求是：当用户完成拖拽（按下→移动→释放鼠标）后，阻止后续的点击事件触发。现有代码存在一些小问题（比如未定义的e、未区分点击与拖拽状态），以下是更简洁且健壮的实现方案：

核心思路 #

通过记录鼠标按下时的初始位置，在移动时判断是否超过最小拖拽阈值（比如2px），若判定为拖拽操作，则在点击事件中跳过执行逻辑；同时简化拖拽相关的事件绑定与状态管理。

优化后的完整代码 #

const tabsBox = document.querySelector('.kemem'),
      allTabs = tabsBox.querySelectorAll('.pop-list'), // 修正原代码选择器与HTML不匹配问题
      arrowIcons = document.querySelectorAll('.icon-mem svg');

let isDragging = false;
let startX = 0;
const DRAG_THRESHOLD = 2; // 最小拖拽距离，超过则判定为拖拽

// 控制箭头显示/隐藏
const handleIcons = () => {
  const maxScrollableWidth = tabsBox.scrollWidth - tabsBox.clientWidth;
  arrowIcons[0].parentElement.style.display = tabsBox.scrollLeft <= 0 ? 'none' : 'flex';
  arrowIcons[1].parentElement.style.display = (maxScrollableWidth - tabsBox.scrollLeft) <= 1 ? 'none' : 'flex';
};

// 箭头点击滚动逻辑
arrowIcons.forEach(icon => {
  icon.addEventListener('click', () => {
    tabsBox.scrollLeft += icon.id === 'left' ? -340 : 340;
    handleIcons();
  });
});

// 标签点击逻辑（仅非拖拽时触发）
allTabs.forEach(tab => {
  tab.addEventListener('click', (e) => {
    if (isDragging) {
      e.preventDefault();
      e.stopPropagation();
      isDragging = false; // 重置拖拽状态
      return;
    }
    tabsBox.querySelector('.active')?.classList.remove('active');
    tab.classList.add('active');
  });
});

// 拖拽相关事件
tabsBox.addEventListener('mousedown', (e) => {
  isDragging = false;
  startX = e.clientX;
  tabsBox.classList.add('dragging');
});

tabsBox.addEventListener('mousemove', (e) => {
  const moveX = Math.abs(e.clientX - startX);
  if (moveX > DRAG_THRESHOLD) {
    isDragging = true;
    tabsBox.scrollLeft -= e.movementX;
    handleIcons();
  }
});

document.addEventListener('mouseup', () => {
  tabsBox.classList.remove('dragging');
});

// 初始化箭头显示状态
handleIcons();

关键优化点 #

1. 精准区分拖拽与点击：通过记录初始鼠标位置+阈值判断，避免把微小误触判定为拖拽
2. 代码简化：
   • 移除冗余的事件阻止逻辑，仅在需要拦截点击时使用
   • handleIcons函数直接读取tabsBox的滚动状态，减少参数传递
   • 修正原代码中选择器与HTML结构不匹配的问题
3. 健壮性提升：使用可选链?.避免找不到.active元素时的报错
4. 状态自动重置：在点击拦截和鼠标抬起时自动重置拖拽状态，避免状态残留

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