Question

鉴于我有这样的HTML：

<a id="google" href="http://google.com">Google.com</a>

和Javascript一样：

$('#google').on('click', function (e) {
  console.log("Click Click Bang Bang!");
});

当我点击google链接时，click事件会触发，页面会立即加载下一个链接...

如果在点击事件结束前加载目标网址（google.com）会怎样？如果事件只是触发并完成而不管可查看的页面更新/更改URL /等，那就太棒了！但如果不是这样，您如何确保click事件完成？

谢谢！

Answer 1

console.log是synchronous调用，并在完成click事件后重定向页面。如果您在asynchronous活动中有click来电，那么您必须注意在离开页面之前必须等待回复。

Answer 2

除此之外还有一点点（很多）。

首先，你应该真正了解事件冒泡也就是说，只要<a>元素找到“点击”事件，就会将“click”事件处理程序设置为运行。

这意味着在该元素告诉其父元素之前将运行给该对象的任何处理程序（谁将告诉他们的父母，一直打开，直到你到达页面顶部）。
切换页面发生在根元素（<html>或document.documentElement）。

因此，在相同的事件中，a.onclick = function () { };将始终发生在window.onclick = function () { };处理程序之前，因为冒泡。

HOWEVER 只会开始划伤表面......

如果您在点击处理程序中运行异步操作，并且点击链接，浏览器将更改页面，那么所有异步内容（服务器调用/图像加载/脚本 - 一旦浏览器到达"unload"阶段（稍后更多），将忽略（或取消）加载/等）。

您需要同步正在执行的操作（保存到document.cookie或localStorage，而不是进行AJAX调用等），或者手动阻止<a>告知它的父母发生了什么，在事件对象上使用.stopPropagation()，传递给事件处理程序。

当然，既然它没有告诉它的父母，它永远不会到达window，所以页面永远不会改变......

...现在，在您的处理程序中，如果您希望更改页面，在完成异步内容之后，您必须通过设置window.location = googleEl.href;手动进行页面更改，并且所以在你确定你的所有异步工作完成之后。

...当然，这不是它的结束......当浏览器确实想要更改页面时，它还会触发"beforeunload"事件和"unload"事件你可以从window收听。同样，相同的异步规则适用...
为了使事情变得更加混乱，只有大多数浏览器触发"beforeunload"，有些浏览器不会打扰。

所以回答你的确切问题：
点击处理程序首先触发，然后触发一些事件，然后是"beforeunload"，然后是"unload"，然后页面会更改。

Answer 3

我建议点击后重定向通过锚点。因此：

$('#google').on('click', function (e) {
  console.log("Click Click Bang Bang!");
  //This would stop from redirecting
  e.preventDefault();
  //This will take you to Google after completing the above task
  window.location.reload = "http://google.com";
});

当事件被触发并且页面更新同时发生时会发生什么？

3 个答案: