HTML中如何实现长按禁用链接，解决图片轨道拖动跳转问题

原代码存在的问题 #

• event.PreventDefault 拼写错误，正确写法是 event.preventDefault()，且该方法无需传入onclick参数
• 未给目标图片绑定 disableLongPress 函数，导致长按判断逻辑完全未生效
• 仅通过鼠标按下/抬起的时间差判断长按，未考虑拖动时的鼠标移动场景，拖动操作即使时间短也应禁用跳转
• 无法直接在mouseup事件中阻止onclick执行，因为onclick会在mouseup之后触发，两者事件上下文独立

修正后的实现代码 #

// 标记是否为长按或拖动操作
let isLongPressOrDrag = false;

function setupImageAction(imgId, targetUrl) {
  const img = document.getElementById(imgId);
  
  // 鼠标按下：初始化状态，记录按下时间
  img.addEventListener('mousedown', () => {
    isLongPressOrDrag = false;
    img.dataset.downTime = new Date().getTime();
  });
  
  // 鼠标移动：只要移动就判定为拖动，禁用跳转
  img.addEventListener('mousemove', () => {
    isLongPressOrDrag = true;
  });
  
  // 鼠标抬起：判断按下时长，更新状态
  img.addEventListener('mouseup', () => {
    const downTime = parseInt(img.dataset.downTime);
    const timeDiff = new Date().getTime() - downTime;
    // 可根据需求调整长按阈值，这里设为500ms更贴合拖动场景
    if (timeDiff > 500) {
      isLongPressOrDrag = true;
    }
  });
  
  // 点击事件：根据状态决定是否跳转
  img.onclick = function() {
    if (!isLongPressOrDrag) {
      location.href = targetUrl;
    }
    // 重置状态，避免影响下一次操作
    isLongPressOrDrag = false;
  };
}

// 给每个图片绑定操作逻辑
setupImageAction('image-2', 'section-2.html');
setupImageAction('image-3', 'section-3.html');
setupImageAction('image-4', 'section-4.html');
setupImageAction('image-5', 'section-5.html');

代码说明 #

• 新增mousemove监听：只要鼠标在图片上移动，直接判定为拖动操作，禁用跳转
• 调整长按阈值为500ms：更符合用户拖动操作的时间感知，减少误触发
• 通过isLongPressOrDrag状态标记控制跳转逻辑，解决事件顺序冲突问题
• 封装统一函数setupImageAction，减少重复代码，提升可维护性

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