浏览器崩溃没有任何错误 - 原因 <button> 在 <form>答案

【问题标题】：Browser crashes without any error - reason <button> inside <form>浏览器崩溃没有任何错误 - 原因 <button> 在 <form>
【发布时间】：2021-08-31 18:55:42
【问题描述】：

我在服务器端使用 Google 应用程序脚本编写应用程序，在客户端使用 MaterializeCSS + 纯 JavaScript。

我开始体验浏览器崩溃 = blank 屏幕没有任何错误。只是一些警告

[Violation] 'click' handler took 1162ms
Unrecognized feature: 'ambient-light-sensor'.
Unrecognized feature: 'speaker'.
Unrecognized feature: 'vibrate'.
Unrecognized feature: 'vr'.

我把范围缩小到这个按钮。注释掉的代码是原始代码。带alert的只是调试用的。

 <!-- <button id ="dotaceAdminDalsiSkola" class="waves-effect btn" onClick="dotaceAdminDalsiSkolaFun()">
      Přidat další školu</button> -->

 <button id ="dotaceAdminDalsiSkola" class="waves-effect btn" onClick="alert('testing')">
      Přidat další školu</button>

现在在某些情况下，当我单击按钮然后单击“确定”以警告浏览器崩溃时没有错误但出现空白屏幕。该按钮位于 MaterlializeCSS 中的表单内。

我创建了一个视频https://youtu.be/MiZehuumc4w，以表明错误并非总是发生。只有在模态中填充了数据之后。如果模态保持为空。没有错误。

   <!-- Dotace Modal Structure -->
  <div id="dotaceModal" class="modal modal-fixed-footer">
    <div class="modal-content">
      <h4>Administrace dotací</h4>
      <div class="row">
        <form id= "dotaceModalForm" class="col s12">
          <div class="row">
            <div class="input-field col s6">
              <input id="dotaceTitulek"  name="dotaceTitulek" type="text" class="validate" data-field-name=""  required>
              <label class="active" for="dotaceTitulek">Název dotace</label>
            </div>
 <!-- <button id ="dotaceAdminDalsiSkola" class="waves-effect btn" onClick="dotaceAdminDalsiSkolaFun()">Přidat další školu</button> -->
 <button id ="dotaceAdminDalsiSkola" class="waves-effect btn" onClick="alert('testing')">Přidat další školu</button>
          </div>
          <div id="dotaceSkolaKotva" data-counter="1"></div>
          <div id="skolaClone1" class="row dotaceSkolaClone" data-counter="1" >
            <div class="input-field col s12">
              <input id="skolaName1"  name="skolaName1" class="validate dotaceSkolaNameAutocomplete" type="text"  data-counter="1" data-field-name="" autocomplete="off" onchange="session.autocomplete.currentDotaceIDCounter=this.dataset.counter">
              <label class="active" for="skolaName1">Název školy</label>
            </div>
            <input id="dotaceSkolaID1" name="skolaID1" type="text" style="display:none">
          </div>
          <div class="row">
            <div class="input-field col s12">
              <input id="dotaceIdentifikace" name="dotaceIdentifikace" class="validate" type="text"  data-field-name="" required>
              <label class="active" for="dotaceIdentifikace">Identifikace dotace</label>
            </div>
          </div>

          <input id="dotaceID"  name="dotaceID" type="text" style="display:none">          
        </form>
      </div>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat" id="dotaceSmazat" style="float:left">Smazat</a>
      <a href="#!" class="modal-close waves-effect waves-green btn-flat" id="dotaceZrusit">Zrušit</a>
      <a href="#!" class="waves-effect waves-green btn-flat" id="dotaceUlozit" onclick="checkForm('dotaceModalForm')">Uložit</a>
    </div>
  </div>

有人可以建议发生了什么，如何调试和解决这个问题？

我在最新的 Chrome、Firefox、Vivaldi、Edge 和 Brave 上对其进行了测试。在私人模式下也没有任何浏览器扩展。所有测试用例的结果相同。

更新

因此，当元素 button 位于模态的 form 内时，就会出现问题。如果我把它放在外面它工作。谁能解释一下？

【问题讨论】：

请添加minimal reproducible example。
@Rubén 我不知道如何创建可重现的示例。我花了几个小时在上面，我只能将其缩小到clicking 按钮。我知道如何在我的环境中重现的确切步骤。
第 1 步。创建一个新的 Google Apps 脚本项目，第 2 步将 doGet 功能添加到默认的 .gs 文件中。您可以选择如何使用 HTML 服务来创建网页，但从最小的 html/javascript/css 开始。首先仅添加有问题的按钮并部署 Web 应用程序。第 3 步。添加其他 HTML 标记和相关元素，直到您能够重现问题。
顺便说一下，Google Apps Script web -apps 总是会遇到一些警告。
“表单”内的“按钮”元素的默认行为是提交该表单，这是在解除警报后屏幕变白时发生的情况视频中的框。您需要阻止默认行为。

标签： javascript google-apps-script web-applications crash materialize

【解决方案1】：

现在你有一个这样的按钮：

<button id="dotaceAdminDalsiSkola" class="waves-effect btn" onClick="dotaceAdminDalsiSkolaFun()">Přidat další školu</button>

大概你在某处有一些代码 -

function dotaceAdminDalsiSkolaFun() {
  // do stuff
}

稍微改变按钮中的onclick调用，将点击事件传递给函数：

<button id="dotaceAdminDalsiSkola" class="waves-effect btn" onClick="dotaceAdminDalsiSkolaFun(event)">Přidat další školu</button>

并且在您的代码中，接收事件参数，并阻止该事件的默认行为（因此表单不会提交）

function dotaceAdminDalsiSkolaFun(e) {
  e.preventDefault();
  // do stuff
}

【讨论】：