检测用户何时单击链接，但中止

这不适用于提交按钮。用户单击“提交”后，请求已发布到服务器。一旦发生这种情况，该操作就已经执行了。在这种情况下，您能做的最好的事情就是阻止用户看到其操作的响应，但仍会执行该操作。

此外，在启动另一个请求后，阻止用户导航到另一个页面的唯一方法是将用户重定向回他们来自的页面。一般来说，取消请求只是一个普通的坏主意™

对于表单，另一种选择是将 AJAX 用于所有表单提交。AJAX 请求可以被取消，因此您可以利用它来发挥自己的优势，尽管这会使事情变得更加复杂和难以处理。

如果你仍然想完成这个，知道其中的含义，你可以用 JavaScript 框架，如 jQuery、YUI、Dojo、MooTools、ExtJS 或 Closure 轻松完成。

下面是如何在jQuery中执行此操作的示例。正如我所提到的，如果不刷新用户所在的页面（以停止当前页面加载），就无法停止请求一旦启动，就无法停止请求，因此我在此示例中省略了该部分。

$().ready(function() { 
    function showLoading(){  
        $loadingOverlay = $('<div id="loadingOverlay"></div>'); 
        $loadingAnimation = $('<div id="loadingAnimation">Loading...</div>'); 
        $("body").prepend($loadingAnimation).prepend($loadingOverlay); 
    } 

    $("a[href]").click(showLoading); 
    $("form").submit(showLoading); 
});

要在加载框中添加动画 gif，请替换文本“正在加载...”带有指向您选择的加载 GIF 的标签。可以在此处看到此演示的现场演示： http://jsbin.com/opadi<img />

你需要这个CSS来配合上面的代码：

#loadingOverlay {
    position: absolute; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    width: 100%; 
    z-index: 1000; 
    background: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;    
    opacity: 0.5;
}
#loadingAnimation {
    position: absolute; 
    top: 30%; 
    left: 50%;
    z-index: 1001;
}

我认为您应该检查所谓的“锚导航”。这里有一个很好的教程：

http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/

基本上，您将用户引用相同的 URL，但末尾带有锚点 （http://localhost/home#somepage?param1=val1），并使用 AJAX 加载数据。Javascript 将捕获锚点更改，并可以显示“正在加载”图标并提供“取消加载”等附加内容。在这种情况下，您将拥有浏览器历史记录，因此您可以在浏览器中说“back”或在javascript中说history.go（-1）。

对不起，我认为没有任何方法可以做到这一点，没有。我的意思是，您可以发现一个转义键，但目前还没有通用的方法来检测下一页加载的取消。除了猜测如果您在提交/点击后仍有几秒钟的时间，那么它要么被取消了，要么您的服务器速度很慢。或者在同一页面中使用 AJAX 完成整个导航和提交工作，只需破坏浏览器自己的停止按钮即可避免问题;可能不是一个好主意。

（我不认为添加一个你自己的等待悸动真的是一个好主意;浏览器有一个非常好的浏览器！

（是的，我确实喜欢老话题）

我在这里面临同样的情况。我正在构建一些页面，其中导航是通过表单提交完成的，我发现在用户退出并触发 15 次相同的请求之前向用户清楚地显示正在发生某些事情很方便——“我们不信任用户，是吗？

因此，我使用jQuery以及一个不错的插件maned Impromptu，http://trentrichardson.com/Impromptu/index.php

这是一段代码：

$(document).ready( function () {

 $("form").submit( function() {
  $.prompt( "<center>Sending request...</center>", {
   overlayspeed: 200,
   buttons:{}
  });

  setTimeout( "jQuery.prompt.close()", 2000 );
 });

});

我不相信可以检查用户是否以跨浏览器的方式点击了停止按钮，但是要找到问题的根源，您可以监控请求本身：

运行 xhr 请求时，请向 注册一个函数。检查是否 .检查您的指示器是否请求成功（手挥手，欢迎编辑）。如果它没有成功，那么它以某种方式被打断了，你应该恢复你的进度指示器。onreadystatechangexhr.readyState === XMLHttpRequest.DONE

如果这是一个常见的场景，你可以通过猴子修补来自动完成此操作。请参阅此问题。

如果是 POST，您可能还应该警告用户取消其请求不会阻止数据更改。您可以在这里变得更加复杂，并自动撤消 POST 请求或告诉他们到底更改了什么，以便他们做出决定。

希望对您有所帮助！

窗。onabort 似乎是一个很有前途的解决方案，但目前（2020-05-02）它被标记为仅由 Chrome 和 Edge 支持的实验性技术。此外，它似乎是为了处理加载现有页面或资源而不是下一页的中止而设计的。