时间戳

首页 > 解决方案 > 浏览器崩溃没有任何错误 - 原因

javascript - 浏览器崩溃没有任何错误 - 原因

问题描述

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

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

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

在此处输入图像描述

我把它缩小到这个按钮。注释掉的代码是原始代码。带有警报的只是用于调试。

 <!-- <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模态框内时，就会出现问题。如果我把它放在外面它工作。有人可以解释一下吗？

标签： javascriptgoogle-apps-scriptweb-applicationscrashmaterialize

解决方案

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

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

推荐阅读