如何在移动设备上实现长按按钮功能并规避默认缩放行为？

要解决移动端长按按钮时浏览器触发缩放、弹出菜单等默认行为的问题，需要从事件阻止和触摸适配两方面入手，以下是具体方案：

核心修改点 #

1. 阻止触摸事件的默认行为，避免浏览器触发内置操作
2. 适配移动端触摸事件（touchstart/touchend/touchcancel）
3. 修复原有代码的变量作用域和初始化问题
4. 配合CSS进一步禁用文本选择和触摸默认行为

修改后的完整代码 #

HTML #

<span id="executeBtn">Execute</span>
<div id="gauge"></div> <!-- 进度显示元素示例 -->

CSS #

#executeBtn {
  user-select: none;
  -webkit-user-select: none; /* 兼容iOS Safari/Android Chrome */
  touch-action: manipulation; /* 告知浏览器仅处理触摸操作，禁用缩放、双击等 */
  cursor: pointer;
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#gauge {
  width: 0;
  height: 8px;
  background-color: #eee;
  transition: width 0.1s;
}

#gauge.full {
  width: 100%;
  background-color: #4CAF50;
}

JavaScript #

let presstime = 0;
let powerInterval = null;
const executeBtn = document.getElementById('executeBtn');

// 开始计时逻辑
function startMeter(elmId) {
  presstime = 0; // 每次按下重置计时
  const gaugeElm = document.getElementById(elmId);
  gaugeElm.classList.remove('full'); // 重置进度样式
  
  powerInterval = setInterval(() => {
    if (presstime > 99) {
      clearInterval(powerInterval);
      gaugeElm.classList.add('full');
    } else {
      presstime += 10;
      gaugeElm.style.width = `${presstime}%`; // 实时更新进度
    }
  }, 100);
}

// 停止计时并执行对应操作
function stopMeter() {
  clearInterval(powerInterval);
  dothings('thing1', presstime);
}

// 统一阻止默认行为的函数
function preventDefault(e) {
  e.preventDefault();
}

// 绑定鼠标事件（PC端）
executeBtn.addEventListener('mousedown', (e) => {
  preventDefault(e);
  startMeter('gauge');
});
executeBtn.addEventListener('mouseup', stopMeter);
executeBtn.addEventListener('mouseleave', stopMeter); // 鼠标离开时停止计时

// 绑定触摸事件（移动端）
executeBtn.addEventListener('touchstart', (e) => {
  preventDefault(e); // 关键：阻止触摸默认行为
  startMeter('gauge');
});
executeBtn.addEventListener('touchend', stopMeter);
executeBtn.addEventListener('touchcancel', stopMeter); // 触摸被中断时停止

// 阻止右键菜单（PC/移动端长按弹出的菜单）
executeBtn.addEventListener('contextmenu', preventDefault);

// 示例：根据时长执行不同操作的函数
function dothings(thingId, time) {
  console.log(`执行操作：${thingId}，长按时长：${time}×100ms`);
  if (time < 30) {
    alert('短按触发操作A');
  } else if (time < 100) {
    alert('中长按触发操作B');
  } else {
    alert('长按满触发操作C');
  }
}

关键说明 #

• touch-action: manipulation：CSS属性，直接告诉浏览器该元素不需要处理双击缩放、长按菜单等默认触摸行为，是移动端优化的核心。
• preventDefault()：在touchstart和mousedown事件中调用，彻底阻止浏览器的默认操作（比如文本选择、缩放）。
• 补充touchcancel和mouseleave：避免用户操作中断时，计时器仍在后台运行导致逻辑混乱。
• 变量作用域优化：将presstime和powerInterval改为局部变量，避免全局变量污染。

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