浏览器崩溃，没有任何错误 - 原因 <button> inside <form>

Question

我正在编写应用程序 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 内部时，就会出现问题。如果我把它放在外面，它就可以工作。有人可以解释一下吗？

Answer 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
}

浏览器崩溃，没有任何错误 - 原因 <button> inside <form>

Browser crashes without any error - reason <button> inside <form>

javascript

crash

web-applications

google-apps-script

materialize