Html 锚标记 onclick() 和 href 同时执行答案

【问题标题】：Html anchor tag onclick() and href execute simultaneouslyHtml 锚标记 onclick() 和 href 同时执行
【发布时间】：2013-10-08 14:34:23
【问题描述】：

类似于HTML anchor link - href and onclick both? 的帖子，我的是：

<a href="/tmp/download.mp3" onclick="update();">Download link</a>

update() 方法将向服务器发送另一个 HTTP GET 方法以更新已下载的文件并更新数据库。从 HTML 代码中，有 2 个 GET 请求一起被触发，只有一个会从服务器获得响应（href 下载响应）。 update() 没有被执行。有什么方法可以让我同时执行 GET 方法吗？欢迎 Javascript 和 Jquery 建议！

【问题讨论】：

我认为您将不得不分解功能。我建议去掉 href 并让 update() 调用写入数据库，然后弹出一个窗口下载文件。
您可以在 update() 函数中使用延迟，使用 setTimeout(function(){})
首先是click，然后是href。这是一种默认行为
@johnSmith 这正是我此刻正在做的事情。但这不是一个一致的解决方案，因为有时不调用超时函数
你能把update函数的代码包含进来吗？

标签： javascript jquery html get onclick

【解决方案1】：

忘记href，只需在点击功能中完成所有操作。更新完成后，您可以导航到另一个页面。这是我的 JQuery 建议：

HTML

<a id="download" href="/tmp/download.mp3">Download link</a>

JavaScript（带有 JQuery）

$("#download").click(function(e){
    e.preventDefault();//this will prevent the link trying to navigate to another page
    var href = $(this).attr("href");//get the href so we can navigate later

    //do the update

    //when update has finished, navigate to the other page
    window.location = href;
});

注意：我为a 标签添加了id，以确保可以通过JQuery 准确选择它

【讨论】：

我会保留以前的href，然后在事件处理程序中使用this.href 更新window.location。如果每个页面有多个下载链接（很可能），那么切换到使用类而不是 ID 选择器会更容易，并且还允许（部分）功能为未启用 JavaScript 的任何人提供。
@AnthonyGrist：虽然，如果update代码是用回调完成的，那么this可能会失去它原来的含义：我会再次更新
对我不起作用。无需e.preventDefault(); 行即可工作。