如何用Vanilla JS实现可拖拽滑块并解决链接点击冲突

问题核心：当鼠标落在带链接的卡片上拖拽滑块后，浏览器会误将操作识别为的点击事件触发跳转。这是因为拖拽过程的mousedown+mousemove+mouseup序列，依然会触发的默认click行为。

修改思路 #

1. 记录拖拽过程中的鼠标位移，区分用户是在拖拽还是纯点击
2. 判定为拖拽时，阻止标签的默认跳转行为
3. 纯点击场景下保留的正常跳转功能

修改后的代码 #

HTML结构（无需改动）

<div class="offers-slider">
 <div class="slider-inner">
  <div class="offer">
    <a href="#">
      <div class="image-container">
        <img src="./assets/offer-slider1.jpg">
      </div> 
      <div class="offer-content">
        <p>dfsd</p>
        <h3>sdfasf</h3>
      </div>
    </a>      
  </div>

  <div class="offer"></div>
  <div class="offer"></div>
  <div class="offer"></div>
  <div class="offer"></div>
  <div class="offer"></div>
</div>
</div>

JavaScript代码

let isPressed = false;
let cursorXSpace;
let scrollLeft;
let isDragged = false; // 标记是否发生有效拖拽
let startX; // 记录鼠标按下时的初始X坐标

const slider = document.querySelector('.offers-slider');
const sliderInner = document.querySelector('.slider-inner');
const offerLinks = document.querySelectorAll('.offer a');

// 为所有卡片内的<a>绑定点击拦截逻辑
offerLinks.forEach(link => {
  link.addEventListener('click', (e) => {
    if (isDragged) e.preventDefault(); // 拖拽过则阻止跳转
  });
});

slider.addEventListener("mousedown", (e) => {
  isPressed = true;
  isDragged = false;
  startX = e.clientX;
  cursorXSpace = e.clientX - sliderInner.getBoundingClientRect().left;
  scrollLeft = sliderInner.scrollLeft;
  slider.style.cursor = "grabbing";
});

window.addEventListener("mouseup", () => {
  isPressed = false;
  slider.style.cursor = "grab";
  // 延迟重置拖拽标记，确保click事件能读取到正确状态
  setTimeout(() => isDragged = false, 100);
});

slider.addEventListener("mousemove", (e) => {
  if (!isPressed) return;
  e.preventDefault();
  // 位移超过5px则判定为拖拽（阈值可按需调整）
  const moveDistance = Math.abs(e.clientX - startX);
  if (moveDistance > 5) isDragged = true;
  
  const x = e.clientX;
  const move = x - cursorXSpace;
  sliderInner.scrollLeft = scrollLeft - move;
  boundCards();
});

function boundCards() {
  const slider_rect = slider.getBoundingClientRect();
  const sliderInner_rect = sliderInner.getBoundingClientRect();

  if (sliderInner.scrollLeft < 0) {
    sliderInner.scrollLeft = 0;
  } else if (sliderInner.scrollLeft + sliderInner.clientWidth > sliderInner.scrollWidth) {
    sliderInner.scrollLeft = sliderInner.scrollWidth - sliderInner.clientWidth;
  }
}

关键说明 #

• 通过isDragged和startX追踪鼠标位移，超过5px则判定为有效拖拽
• 在的click事件中根据拖拽状态决定是否阻止跳转
• mouseup后延迟重置拖拽标记，避免click事件读取到错误状态