卡片滑块内超链接无法点击，pointer-events: none无法移除，如何兼容功能？

问题根因 #

你当前遇到的冲突核心是：你使用e.offsetX计算滑动坐标，当鼠标/触摸点落在卡片等子元素上时，offsetX的参照对象会变为当前点击的子元素，而非外层slider容器，导致坐标计算错误、滑动功能失效。你之前通过给.slider-inner加pointer-events: none规避了坐标计算问题，但同时完全禁用了所有子元素的点击事件，导致跳转失效。
此外现有代码存在事件名写错（mouseevent为无效事件，应为mouseenter）、重复监听mouseup事件的问题，也会影响功能稳定性。

可行实现方案 #

方案1：修改坐标计算逻辑（最稳定，全端兼容） #

该方案彻底解决坐标计算的底层问题，无需依赖pointer-events做冲突规避，同时兼容桌面端和移动端。

1. CSS修改

直接删除.slider-inner规则中的pointer-events: none属性，其余样式保持不变。

2. JS修改

将坐标计算逻辑改为基于视口绝对坐标clientX，避免子元素干扰，同时增加触摸事件支持、点击/拖动区分逻辑，防止拖动时误触发跳转：

let slider = document.querySelector(".slider");
let innerSlider = document.querySelector(".slider-inner");

let pressed = false;
let startX = 0;
let initialLeft = 0;

// 桌面端事件
slider.addEventListener("mousedown", (e) => {
  pressed = true;
  startX = e.clientX;
  initialLeft = parseInt(innerSlider.style.left) || 0;
  slider.style.cursor = "grabbing";
});

slider.addEventListener("mouseenter", () => {
  slider.style.cursor = "grab";
});

slider.addEventListener("mouseup", () => {
  slider.style.cursor = "grab";
  pressed = false;
});

slider.addEventListener("mousemove", (e) => {
  if (!pressed) return;
  e.preventDefault();
  const currentX = e.clientX;
  const moveX = currentX - startX;
  innerSlider.style.left = `${initialLeft + moveX}px`;
  checkboundary();
});

// 移动端触摸事件
slider.addEventListener("touchstart", (e) => {
  pressed = true;
  startX = e.touches[0].clientX;
  initialLeft = parseInt(innerSlider.style.left) || 0;
});

slider.addEventListener("touchend", () => {
  pressed = false;
});

slider.addEventListener("touchmove", (e) => {
  if (!pressed) return;
  e.preventDefault();
  const currentX = e.touches[0].clientX;
  const moveX = currentX - startX;
  innerSlider.style.left = `${initialLeft + moveX}px`;
  checkboundary();
});

function checkboundary() {
  let outer = slider.getBoundingClientRect();
  let inner = innerSlider.getBoundingClientRect();
  let currentLeft = parseInt(innerSlider.style.left);
  if (currentLeft > 0) {
    innerSlider.style.left = "0px";
  } else if (inner.right < outer.right) {
    let temp = inner.width - outer.width;
    innerSlider.style.left = `${-temp}px`;
  }
}

3. HTML调整

卡片上不要同时写onclick和a标签，避免跳转逻辑冲突，建议直接用a标签的href属性做跳转，删除冗余的onclick事件。

方案2：动态控制pointer-events（改造成本最低） #

如果不想修改现有滑动逻辑，可通过动态切换pointer-events状态解决冲突：

1. CSS修改

保留.slider-inner的pointer-events: none，新增两条规则：

/* 正常状态下允许点击可跳转元素 */
.slider-card a {
  pointer-events: auto;
}
/* 拖动状态下禁用所有子元素事件，避免坐标计算错误 */
.slider-inner.dragging * {
  pointer-events: none;
}

2. JS修改

在拖动开始时给.slider-inner加dragging类，拖动结束后移除：

// 在mousedown、touchstart事件中新增
innerSlider.classList.add('dragging');

// 在mouseup、touchend事件中新增
innerSlider.classList.remove('dragging');

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