单击使用JavaScript记录

我想记录链接上的所有点击。

我写了一个小记录器，可以通过url调用（返回一个空页面）。 使用jquery-ajax方法调用此URL。 但遗憾的是，如果用户使用firefox（IE中的一切看起来都不错），则不会记录每次点击。

我尝试了很多东西，但没有解决这个问题的方法，有没有胶水？

HTML的代码：

Click 

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’代码并在以后绑定事件：

  Click $("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 。

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

关于Async

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

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

一个更复杂的答案是让它返回“false”（这会杀死浏览器本机“跟随链接”行为），然后在complete函数中执行真正的重定向。

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

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

（因此，在一个简单的例子中，这个解决方案的复杂性比async: false更难以实现async: false ）

Answer 2

我认为FF给你糟糕结果的原因是因为你在行动需要时间执行之前离开了页面。 正如mhartman的链接提到如果你在外部链接上使用目标它应该工作正常。 如果您不能这样做，那么您可能必须等待日志完成，尽管您可能会看到导航延迟。

HTML代码

 Click 

该

 function loggClick(e) { if (!e) e = window.event; e.preventDefault(); // cancels the link var theLink = this.href; // stores the link for later $.ajax({ async: false, 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, complete: function() { // navigate when the log completes this.location.href = theLink; } }); return true; } } 

Answer 3

您可能没有想到的第二种服务器端方法是拥有一个处理重定向并然后记录数据的页面。

例如：

 Click 

Answer 4

上面的海报是正确的，它是不可靠的，因为你有机会记录它之前离开页面。

你可以这样做：

1）返回false，因此href不活动。 2）记录点击3）使用location.href重定向到它本来被重定向到的url

如果你的onclick处理程序需要很长时间才能执行，你可能会看到一点延迟。

Answer 5

此示例将在处理链接单击之前触发ajaxpost。 我发现我必须同步调用ajax或POST不会被执行。 在这个例子中，我的ajaxpost是一个附加日志文件的PHP页面。 此示例很有效，因为它只将click事件附加到窗口。 它也不会干扰用户点击链接。

 //attach click event to window attachClickEvent = function() { $(document).on('click', function(e) { //document for IE8 compatibility var element = $(e.target); var tag = element.prop('tagName'); if (tag === 'A') { var data = {'title':document.title, 'URL':element.attr('href'), 'origin':location.href}; logData(data); } }); } logData = function(data) { $.ajax({ async: false, cache: false, type: "POST", data: data, url: 'logger.php', success: function(msg) { //debugging }, error: function() { //debugging } }); }