Firebase Web API按钮点击回调中set方法无法写入数据库问题

嘿，我一眼就看出你遇到的问题了——你的按钮放在<form>标签里，点击时会触发表单的默认提交行为，页面会立刻刷新！这就导致Firebase的set()操作还没来得及完成，页面就重新加载了，自然看不到"DOESNT WORK"写入数据库。

你可以自己验证一下：点击按钮后快速看控制台，会发现"before"和"after"闪一下就消失了，同时浏览器地址栏会有刷新的动作，这就是表单提交在搞鬼。

两种快速解决方法 #

方法1：阻止表单的默认提交行为 #

在按钮的点击回调里加上event.preventDefault()，直接打断表单提交的默认逻辑：

sub.onclick = function(event){
  event.preventDefault(); // 关键：阻止表单提交刷新页面
  console.log("before");
  firebase.database().ref().child('events').set("DOESNT WORK");
  console.log("after");
}

方法2：修改按钮类型 #

给按钮加上type="button"属性，告诉浏览器这只是个普通按钮，不是表单的提交按钮：

<button id="sub" type="button"></button>

修正后的完整代码示例 #

HTML代码 #

<html> 
<head> 
  <meta charset="utf-8"> 
  <title>Organiser</title> 
</head> 
<body> 
  <script src="https://www.gstatic.com/firebasejs/5.0.4/firebase.js"></script> 
  <form> 
    <button id="sub" type="button"></button>
  </form> 
  <script src="organiser_writer.js"></script> 
</body> 
</html>

JS代码 #

(function() { 
  // Initialize Firebase 
  console.log("Initialising Firebase"); 
  var config = { 
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxx", 
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxx", 
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxx", 
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxx", 
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxx", 
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxx" 
  }; 
  firebase.initializeApp(config); 
  firebase.database().ref().child('events').set("WORKS"); 

  const buttonsub = document.getElementById('sub'); 
  // 这里统一用buttonsub变量，避免依赖全局自动挂载的sub，更规范
  buttonsub.onclick = function(event){
    event.preventDefault(); // 保险起见加上，即使按钮加了type也不影响
    console.log("before");
    firebase.database().ref().child('events').set("DOESNT WORK");
    console.log("after");
  } 
}());

另外提个小细节：你的JS里定义了buttonsub变量，但后面用了sub.onclick——虽然浏览器会把元素id自动挂载到全局对象上，所以能生效，但这种写法不够规范，建议统一用buttonsub.onclick，避免潜在的命名冲突哦。

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