点击Div元素后自动跳转？基于Google Sheet表单的技术问询

你遇到的点击div后页面意外跳转的问题，大概率是浏览器触发了表单默认提交行为导致的，结合你提供的代码（注意你的HTML代码片段是截断的），我梳理了几个核心原因和修复方案：

核心原因推测 #

从现有代码和常见的Google Sheet表单开发场景来看，可能性最高的情况是：

• 可点击的#accordion1元素被嵌套在<form>标签内部，点击div时，浏览器误将这个操作识别为表单提交触发（尤其是如果div附近有表单提交相关的逻辑），从而触发表单默认提交动作，跳转到表单action指定的地址（未指定的话会刷新当前页面，看起来像是跳转）。
• 你没有在点击事件中阻止浏览器的默认行为，导致即使点击只是用来切换面板显示，也会触发后续的默认动作。

具体修复方案 #

1. 为点击事件添加默认行为阻止 #

首先给你的#accordion1补充点击事件处理，并在其中阻止默认行为：

$(document).ready(function() {
  // 保留你原有的hover逻辑
  $('#accordion1').hover(function() {
    if($('#panel1').css("display") === 'none'){
      $('#acc1Button').attr("src", "http://smart-hr.com/img/DataGather_circle_btn_red.png");
      $('#accordion1').css("background", "#ac0002");
      $('#acc1Header').css("color", "#fff");
    } else{
      $('#acc1Button').attr("src", "http://smart-hr.com/img/DataGather_circle_btn_red_up.png");
      $('#accordion1').css("background", "#ac0002");
      $('#acc1Header').css("color", "#fff");
    }
  }, function() {
    if($('#panel1').css("display") === 'none'){
      $('#acc1Button').attr("src", "http://smart-hr.com/img/DataGather_circle_btn_gray.png");
      $('#accordion1').css("background", "#eeeeee");
      $('#acc1Header').css("color", "#545454");
    } else{
      $('#acc1Button').attr("src", "http://smart-hr.com/img/DataGather_circle_btn_red_up.png");
      $('#accordion1').css("background", "#ac0002");
      $('#acc1Header').css("color", "#fff");
    }
  });

  // 新增点击事件，阻止默认行为并处理面板切换
  $('#accordion1').on('click', function(e) {
    // 关键：阻止浏览器默认行为，避免表单提交/页面跳转
    e.preventDefault();
    // 切换面板显示状态
    $('#panel1').toggle();
    // 同步更新按钮和样式
    if($('#panel1').css("display") === 'none'){
      $('#acc1Button').attr("src", "http://smart-hr.com/img/DataGather_circle_btn_red.png");
      $('#accordion1').css("background", "#ac0002");
      $('#acc1Header').css("color", "#fff");
    } else{
      $('#acc1Button').attr("src", "http://smart-hr.com/img/DataGather_circle_btn_red_up.png");
      $('#accordion1').css("background", "#ac0002");
      $('#acc1Header').css("color", "#fff");
    }
  });
});

2. 检查表单标签的嵌套范围 #

确认#accordion1是否被包裹在<form>标签内：

• 如果这个div只是用来切换面板，不需要关联表单提交，直接把它移到<form>标签外部即可。
• 如果必须留在表单内，除了阻止默认行为，还要确保表单只有明确的提交按钮（比如<button type="submit">）才会触发提交，避免浏览器误判。

3. 修复jQuery重复引入的问题 #

你在HTML里重复引入了两个版本的jQuery：

<script src="https://code.jquery.com/jquery-3.2.1.js" ...></script>
...
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

版本冲突会引发各种事件异常，建议只保留一个较新的版本（比如移除1.12.4的引入，保留3.2.1）。

额外提示 #

Google Sheet的HtmlService在渲染表单时，默认的表单提交会触发doPost方法，如果你没有定义doPost，也可能导致页面跳转或报错。确保你的表单提交逻辑是通过google.script.run调用后端函数（比如你的writeForm），而不是依赖表单默认提交：

// 正确的表单提交方式示例
$('form').on('submit', function(e) {
  e.preventDefault();
  google.script.run.writeForm($(this).serializeArray());
  // 后续处理：比如显示提交成功提示
});

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