javascript - JS 将事件附加到浏览器停止按钮

Question

这个问题已经有答案了:

Any Javascript event occurring when user clicks Stop load button? (3 个回答)

已关闭 7 年前。

假设我的页面上有一个带有提交按钮的 HTML 表单。我已将一些逻辑附加到表单提交事件，以更改显示以显示加载图标(除了将表单发布到服务器之外)。但是，如果我按转义键或单击浏览器的停止按钮，提交事件将停止，但现在加载图标不会消失。

是否可以在“表单中断”事件中附加一些JS逻辑，然后清除加载图标？

window.onabort看起来它可能是为此目的而设计的，但它似乎没有任何浏览器支持。

使用 JQuery 或普通 JS 的解决方案都可以。

编辑为带有澄清的代码示例

<form action="/myServerRoute" method="post">
  <input type="submit" value="Submit form" onclick="DisplayLoadingAnimation();" />
 </form>

<script>
    function DisplayLoadingAnimation() {
      alert('Imagine this manipulates the DOM to render loading elements.');
    }
  
    function HideLoadingAnimation() {
      alert('Imagine this manipulates the DOM to clear loading elements.');  
    }
</script>
                                                    

想象一下，我单击“提交表单”按钮，但随后在服务器响应之前按下了浏览器的停止按钮。我怎样才能做到这一点，以便在发生这种情况时执行 HideLoadingAnimation？

Answer 1

类似的基本结构是。单击按钮时，在文档上注册一个按键监听器(如果不需要，请确保稍后将其删除)。 keypress事件可以检查按下的是哪个键(可以添加代码)，然后适当修改html。然后，如果按下该键，则应删除监听器。

没有跨浏览器的方法来确定停止按钮是否被单击。 IE 有 onstop 事件，但 webkit 不支持此。

    function mySubmit( event ){
        event.preventDefault();
        document.querySelector('button').innerHTML = "Loading";
        
        listenForEscapeAndStop();

    }

    function listenForEscapeAndStop(){
      
        var reference = document.addEventListener("keyup", function(){
            document.querySelector('button').innerHTML = "My Button";
            document.removeEventListener("keyup", reference);
              
        });
      
        document.onstop = function(){ // IE only
            document.querySelector('button').innerHTML = "My Button";
        };
    }

    <button onclick='mySubmit( event )'> My Button </button>