移动端链接元素区域滑动（滚动）失效问题求助

你的问题出在原代码监听的是window的滚动事件，但移动端滑动图片时，若图片处于可滚动的容器内部（而非整个页面滚动），window.scroll不会触发，导致disable_click_flag始终为false，点击阻止逻辑失效。

推荐改用触摸事件来判断用户是滑动还是点击，这种方式更适配移动端交互：

let isScrolling = false;
let touchStartX = 0;
let touchStartY = 0;
// 滑动阈值：超过这个距离判定为滑动，而非点击
const SCROLL_THRESHOLD = 10;

// 监听触摸开始事件，记录初始位置
document.addEventListener('touchstart', function(e) {
  isScrolling = false;
  touchStartX = e.touches[0].clientX;
  touchStartY = e.touches[0].clientY;
});

// 监听触摸移动事件，判断是否超过滑动阈值
document.addEventListener('touchmove', function(e) {
  const deltaX = Math.abs(e.touches[0].clientX - touchStartX);
  const deltaY = Math.abs(e.touches[0].clientY - touchStartY);
  
  if (deltaX > SCROLL_THRESHOLD || deltaY > SCROLL_THRESHOLD) {
    isScrolling = true;
  }
});

// 阻止滑动过程中的点击跳转
document.addEventListener('click', function(e) {
  if (isScrolling) {
    e.preventDefault();
    isScrolling = false; // 重置状态
  }
}, true);

代码说明： #

• 通过touchstart记录触摸初始坐标，touchmove计算位移差，当位移超过设定阈值（10px）时标记为滑动状态。
• 在click事件中，若检测到处于滑动状态，则阻止链接的默认跳转行为。
• 最后一个参数true表示使用事件捕获，确保在链接的点击事件触发前先执行判断逻辑。

如果你的图片列表是放在某个特定容器内（比如class="image-list-container"），可以把事件监听范围缩小到该容器，提升性能：

const container = document.querySelector('.image-list-container');

container.addEventListener('touchstart', function(e) {
  isScrolling = false;
  touchStartX = e.touches[0].clientX;
  touchStartY = e.touches[0].clientY;
});

container.addEventListener('touchmove', function(e) {
  const deltaX = Math.abs(e.touches[0].clientX - touchStartX);
  const deltaY = Math.abs(e.touches[0].clientY - touchStartY);
  
  if (deltaX > SCROLL_THRESHOLD || deltaY > SCROLL_THRESHOLD) {
    isScrolling = true;
  }
});

container.addEventListener('click', function(e) {
  if (isScrolling) {
    e.preventDefault();
    isScrolling = false;
  }
}, true);

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