单击使用 JavaScript 记录日志

问题描述

我想记录对链接的所有点击.

I want to log all clicks on a link.

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

I've written a little logger, which can be called by an url (returns an empty page). This url is called with a jquery-ajax-method. But unfortunately not every click is logged, if the user uses firefox (everything looks ok in IE).

我已经尝试了很多方法，但没有解决这个问题，有没有人可以提供胶水?

I've tried many things but have no solution to this problem, have anybody a glue?

HTML 代码:

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

JS-jQuery-Skript:

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-event :(

I've missed in the example that i have to pass dynamic parameters in the js-call, so it's "not possible" to remove the onclick-event :(

推荐答案

我将开始摆脱内联的'onclick'代码并稍后绑定事件:

I would start getting rid of the inline 'onclick' code and binding the event later:

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

另外，您可能会出现竞争状况".在我的示例中，我 将异步设置为 false.

Also, you might have a "Race Condition" occurring. In my example I have set async to false.

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

This will stop the function returning and following the link before the request has been performed.

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

The reason I use async: false here is because with the default, aync is true, which means the AJAX request may only be partially transmitted by the time the browser sees return: true, and navigates away from the page.

这就是我提到的竞争条件".在这里，这是一个廉价的技巧，它通过让浏览器在请求完成之前基本上停止，然后允许浏览器点击链接来避免它.

This is that "race condition" I was mentioning. Here, its a cheap trick that avoids it by making the browser essentially come to a halt until the request is complete, and then allowing the browser to click the link.

一个更复杂的答案是让它返回false"，(这将杀死浏览器的原生follow link"行为)，然后在 complete 中执行 real 重定向 函数.

A more sophisticated answer would be having it return "false", ( which will kill the browsers native "follow link" behaviour ), and then having the real redirection performed in the complete function.

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

This is not without its own issues mind, and could result in slow browsing behaviour while requests complete, allowing users time to click other links, which appear to do nothing, and then eventually one request gets through at a random time, and a seemingly random redirection occurs.

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

Hence, advanced solutions include blocking the rest of the page and giving some sort of progress indication while the request completes.

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

( And hence, the complexity of this solution is an order of magnitude harder to pull off in a simple example than async: false )

这篇关于单击使用 JavaScript 记录日志的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！