移动设备单选按钮onchange事件失效及延迟执行需求

问题根源 #

1. 内联onchange事件在移动端触摸场景下兼容性差，容易失效
2. 原代码中myModal未定义，导致"No"按钮的关闭逻辑报错
3. 全局window.onclick事件可能拦截单选按钮的点击事件

解决方案步骤 #

• 移除HTML中的内联事件，改用JavaScript统一绑定事件监听
• 同时监听click和touchstart事件，覆盖移动端触摸和桌面端点击场景
• 使用setTimeout实现2秒延迟执行目标操作
• 统一使用已声明的modal变量，修正变量未定义问题
• 调整window.onclick的判断逻辑，避免干扰弹窗内部元素的交互

完整修复代码 #

HTML部分

<div class="modal-content">
  <span class="close">&times;</span>                       
  <div class="radcen">  
    <input type="radio" id="yes" value="Yes">
    <label class="free-label four col" for="yes">Yes</label>
    <input type="radio" id="no" value="No">
    <label class="basic-label four col" for="no">No</label>
  </div>
</div><!-- Modal content -->

JavaScript部分

var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
var yesRadio = document.getElementById("yes");
var noRadio = document.getElementById("no");

// 页面加载显示弹窗
window.onload = function() {
  modal.style.display = "block";
}

// 关闭按钮逻辑
span.onclick = function() {
  modal.style.display = "none";
}

// 点击弹窗外部关闭
window.onclick = function(event) {
  // 仅当点击的是弹窗容器本身时才关闭，避免干扰内部元素
  if (event.target === modal) {
    modal.style.display = "none";
  }
}

// 绑定单选按钮事件（兼容移动端触摸）
function bindRadioEvents() {
  // Yes按钮：延迟2秒后跳转
  function handleYesSelect() {
    setTimeout(function() {
      window.location.href = 'https://www.example.com/';
    }, 2000); // 2000毫秒=2秒
  }

  // No按钮：延迟2秒后关闭弹窗
  function handleNoSelect() {
    setTimeout(function() {
      modal.style.display = "none";
    }, 2000);
  }

  // 为Yes按钮绑定点击和触摸事件
  yesRadio.addEventListener('click', handleYesSelect);
  yesRadio.addEventListener('touchstart', handleYesSelect);

  // 为No按钮绑定点击和触摸事件
  noRadio.addEventListener('click', handleNoSelect);
  noRadio.addEventListener('touchstart', handleNoSelect);
}

// 初始化事件绑定
bindRadioEvents();

额外说明 #

• 同时监听click和touchstart是为了确保移动端触摸操作能被正确触发，避免因浏览器触摸事件的延迟或兼容性问题导致失效
• setTimeout的第一个参数是延迟后执行的函数，第二个参数是延迟时间（单位毫秒）
• 调整后的window.onclick逻辑使用===严格判断，确保只有点击弹窗最外层容器时才关闭，不会影响内部的单选按钮和标签点击

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