按钮事件从mouseover改click后无法POST JSON数据问题排查

为按钮绑定mouseover事件时脚本可正常运行，将事件修改为click后脚本失效，无法向JSON存储服务POST提交任何JSON数据。

关联JS代码 #

<script>
const button = document.getElementById("search-image")
const s = document.getElementById("s")
function SendData(){

   var xhr = new XMLHttpRequest();
   var url = "https://krat.es/xxxxx";
   xhr.open("POST", url, true);
   xhr.setRequestHeader("Content-Type", "application/json");

   xhr.onreadystatechange = function () {

       if (xhr.readyState === 4 && xhr.status === 200) {

           var json = JSON.parse(xhr.responseText);

       }
   };

   var data = JSON.stringify({"Text": s.value});
   console.log(data)
   xhr.send(data);
}
button.addEventListener("mouseover",SendData)
</script>

关联页面HTML代码 #

<form _lpchecked="1" action="/search" class="search-form" id="searchform" method="get">
<fieldset>
<input id="s" name="q" onfocus="if(this.value=='Search')this.value='';" onwebkitspeechchange="transcribe(this.value)" type="text" value="Search" x-webkit-speech="">
<button class="sbutton" id="search-image" style="border:0; vertical-align: top;background: transparent;"><i class="fa fa-search"></i></button>
</fieldset>
</form>

位于<form>标签内的<button>如果没有显式指定type属性，默认type值为submit。

• 绑定mouseover事件时，鼠标悬浮只会触发绑定的自定义逻辑，不会触发按钮的默认表单提交行为，异步XHR请求可以正常发送完成，因此功能正常。
• 绑定click事件时，点击按钮会先执行SendData方法发起POST请求，但紧接着会触发按钮默认的表单提交行为，页面会直接跳转到表单的action地址/search，异步请求还未完成发送就被浏览器因页面卸载取消，因此服务端收不到任何POST数据。

二选一即可：

• 方案1：给按钮显式添加type="button"属性，让按钮不再触发表单提交的默认行为：

<button type="button" class="sbutton" id="search-image" style="border:0; vertical-align: top;background: transparent;"><i class="fa fa-search"></i></button>

• 方案2：在点击事件的处理函数中调用方法阻止默认行为：

function SendData(e){
   // 阻止默认表单提交跳转
   e.preventDefault();

   var xhr = new XMLHttpRequest();
   var url = "https://krat.es/xxxxx";
   xhr.open("POST", url, true);
   xhr.setRequestHeader("Content-Type", "application/json");

   xhr.onreadystatechange = function () {
       if (xhr.readyState === 4 && xhr.status === 200) {
           var json = JSON.parse(xhr.responseText);
       }
   };

   var data = JSON.stringify({"Text": s.value});
   console.log(data)
   xhr.send(data);
}
button.addEventListener("click",SendData)

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