如何禁用移动端单选按钮的双击触发事件？

以下是针对你场景的具体修复方案：

1. 添加视口元标签消除300ms点击延迟 #

移动端浏览器默认存在300ms点击延迟（用于判断是否为双击缩放操作），这是导致双击问题的核心原因之一。在HTML的<head>中添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 确保单选按钮点击区域可正确触发 #

你使用了自定义样式的单选按钮（通过checkmark-*类），需要保证原生<input>元素能被触摸事件正确识别。给单选按钮及容器添加以下CSS样式：

input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.container {
  position: relative; /* 让input的绝对定位基于label容器 */
  cursor: pointer;
}

设置后，原生input会覆盖整个label容器区域，点击label的任意部分都会直接触发单选按钮选中，无需双击。

3. 优化交互逻辑（可选） #

当前你在点击链接时才更新href，建议改为监听单选按钮的change事件实时更新链接，提升用户体验：

// 替换原myFunction
document.querySelectorAll('input[name="payment"]').forEach(radio => {
  radio.addEventListener('change', function() {
    const link = document.getElementById('myLink');
    switch(this.id) {
      case 'monthly':
        link.href = "https://www.rageheart.co/beast-monthly";
        break;
      case 'yearly':
        link.href = "https://www.rageheart.co/beast-yearly";
        break;
      case 'onemonth':
        link.href = "https://www.rageheart.co/beast-1-month";
        break;
    }
  });
});

// 页面加载时初始化默认链接
document.getElementById('myLink').href = "https://www.rageheart.co/beast-monthly";

同时移除链接上的onclick属性：

<a href="" id="myLink">Checkout &#8594;</a>

验证修复 #

完成上述修改后，移动端点击单选按钮区域即可一次点击选中，链接也会实时更新为对应选项的地址。

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