Codepen中JS代码桌面端正常，移动端无响应问题求助

问题描述 #

在Codepen中开发的表单提交逻辑，桌面端点击提交按钮后能正常移除result元素的hidden属性使其显示，但移动端点击按钮后无反应。该问题仅在Codepen环境复现，其他平台（如Stack Overflow）运行正常，且未修改Codepen默认设置。

涉及代码如下：

const form = document.getElementById("form")

form.addEventListener('submit', function(event) {
  const result = document.getElementById("result");

  result.removeAttribute("hidden");

  event.preventDefault();
})

<form id="form">
  <input type="submit" value="Submit">
</form>

<div hidden id="result">Result</div>

可能原因与解决方案 #

方案1：兼容移动端触摸事件

Codepen的移动端预览环境可能存在触摸事件与submit事件的映射问题，导致submit事件未被正确触发。可以同时监听touchstart事件来确保逻辑执行：

const form = document.getElementById("form");
const result = document.getElementById("result");

function showResult(event) {
  result.removeAttribute("hidden");
  event.preventDefault();
  event.stopPropagation();
}

// 同时监听submit和touchstart事件
form.addEventListener('submit', showResult);
form.addEventListener('touchstart', showResult);

方案2：用CSS类替代原生hidden属性

部分移动端内嵌预览环境对原生hidden属性的解析可能存在差异，改用CSS类控制显示状态更稳定：

<form id="form">
  <input type="submit" value="Submit">
</form>

<div id="result" class="hidden">Result</div>

.hidden {
  display: none;
}

const form = document.getElementById("form")

form.addEventListener('submit', function(event) {
  const result = document.getElementById("result");
  result.classList.remove("hidden");
  event.preventDefault();
})

方案3：直接绑定按钮的点击/触摸事件

绕过表单的submit事件，直接给提交按钮绑定点击和触摸事件，避免表单事件在移动端的兼容性问题：

const submitBtn = document.querySelector('input[type="submit"]');
const result = document.getElementById("result");

function showResult(event) {
  result.removeAttribute("hidden");
  event.preventDefault();
  event.stopPropagation();
}

submitBtn.addEventListener('click', showResult);
submitBtn.addEventListener('touchstart', showResult);

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