Question

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

是否可以将一些JS逻辑附加到＆＃34;形式中断＆＃34;事件然后清除加载图标？

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

使用JQuery或普通香草JS的解决方案都很好。

编辑以澄清代码示例

＆＃13;

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

＆＃13;

想象一下，我点击了＆＃34;提交表单＆＃34;按钮，然后在服务器响应之前按下浏览器的停止按钮。我怎样才能在发生这种情况时执行HideLoadingAnimation？

Answer 1

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

没有跨浏览器方式来确定单击停止按钮。 IE虽然有onstop个事件，但webkit并不支持此事。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: