移动端HTML禁用长按弹窗但保留点击功能的实现方案

方法1：CSS伪元素覆盖+禁用文本选择 #

给目标<a>标签添加相对定位，用伪元素覆盖整个按钮区域，同时禁用文本选择，阻止长按触发系统菜单，且不影响点击跳转：

.Button-one {
  position: relative;
  user-select: none; /* 禁止文本选中，降低触发系统菜单的概率 */
  /* 保留原有按钮样式 */
}

.Button-one::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

伪元素会承接长按操作，不会触发<a>标签的系统菜单，而点击事件会穿透伪元素，正常触发跳转。

方法2：JavaScript监听长按事件并阻止默认行为 #

通过监听触摸/鼠标事件，判断长按时长，超过阈值时阻止默认行为，短点击则正常跳转：

const targetBtn = document.querySelector('.Button-one');
let pressTimer;

// 处理触摸事件
targetBtn.addEventListener('touchstart', (e) => {
  pressTimer = setTimeout(() => {
    e.preventDefault(); // 阻止长按的系统菜单弹窗
  }, 300); // 长按阈值，可根据需求调整
});

targetBtn.addEventListener('touchend', () => {
  clearTimeout(pressTimer);
});

// 兼容桌面端鼠标长按（可选）
targetBtn.addEventListener('mousedown', (e) => {
  pressTimer = setTimeout(() => {
    e.preventDefault();
  }, 300);
});

targetBtn.addEventListener('mouseup', () => {
  clearTimeout(pressTimer);
});

方法3：替换为标签+JS实现跳转 #

如果前两种方法效果不佳，可将<a>替换为<button>，通过JavaScript手动实现页面跳转，避免链接类的系统长按菜单：

<button class="Button-one" title="Relevant Title">BTN-1</button>

const targetBtn = document.querySelector('.Button-one');
targetBtn.addEventListener('click', () => {
  window.location.href = 'HTML/test.html';
});

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