javascript - 单击使用 JavaScript 记录

Question

我想记录对一个链接的所有点击。

我写了一个小记录器，可以通过 url 调用(返回一个空页面)。这个 url 是用 jquery-ajax-method 调用的。但不幸的是，如果用户使用 firefox(在 IE 中一切正常)，并不是每次点击都会被记录下来。

我已经尝试了很多方法，但都没有解决这个问题，有人有胶水吗？

HTML 代码:

<a href="http://google.com" onclick="return loggClick();">Click</a>

JS-jQuery-Skript:

function loggClick(){
   $.ajax({
        type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
            sid: 'abc123' //random data
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false
    });
    return true;
}

编辑:我在示例中错过了我必须在 js 调用中传递动态参数，因此“不可能”删除 onclick 事件 :(

Answer 1

我会开始摆脱内联“onclick”代码并稍后绑定(bind)事件:

  <a href="http://google.com" rel="outbound" >Click</a>


   $("a[rel=outbound]").click(function(){ 
        var url = this.href; 
        $.ajax({
        async: false,
        type: "POST",
        url: "Logger.ff", //dynamic url to logging action
        data: {
                sid: 'abc123' //random data
                clicked: url
        },
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        cache: false
     });
     return true; 
  }); 

此外，您可能会发生“竞争条件”。在我的示例中，我已将 async 设置为 false。

这将停止函数在执行请求之前返回并跟踪链接。

关于异步

我在这里使用 async: false 的原因是因为默认情况下，aync 为 true，这意味着 AJAX 请求可能仅在浏览器看到 return: true 时部分传输，然后离开页面。

这就是我提到的“竞争条件”。在这里，这是一个通过使浏览器停止直到请求完成，然后允许浏览器单击链接来避免它的廉价技巧。

一个更复杂的答案是让它返回“false”(这将终止浏览器 native 的“follow link”行为)，然后在 complete 中执行真实重定向 函数。

这并非没有问题，可能会导致请求完成时浏览速度变慢，让用户有时间点击其他链接，但这些链接似乎什么都不做，最终一个请求在随机时间通过，并且发生看似随机的重定向。

因此，高级解决方案包括阻止页面的其余部分并在请求完成时提供某种进度指示。

(因此，这个解决方案的复杂性比 async: false 更难在一个简单的示例中实现)