记录我的网站上的超链接点击

发布于 2024-10-11 07:13:05 字数 695 浏览 2 评论 0原文

我有一个网站，允许其他开发人员在其中托管内容。我的目标是记录页面上存在的每个超链接（甚至是其他开发人员托管的内容）的点击次数。

我最初的方法如下：

$('a').click(function(event)
             {
                //do my logging
                return true;
             }
);

现在采用上述方法，我面临以下问题：

开发人员可能在锚链接内有图像，因此事件目标是图像而不是 href
许多开发人员有自己的处理 href 单击的方法，使用 onclick 事件而不是简单的 href='' attr
一些开发人员将他们的自定义 attr 添加到标记中，并具有自定义函数来处理点击，

所以基本上，问题是，有各种各样的锚标记可用，记录点击次数并不那么简单。
许多情况下，我可以记录我想要的数据，但也有少数情况下，严重破坏了代码。

我在这个论坛上发帖的目的是：

讨论在动态环境中进行超链接点击记录的正确方法是什么
，是否有一个插件可以实现这样的功能。

我知道 facebook 和 google 有这个，但他们对他们的环境中托管的内容有全面的控制。

非常感谢任何帮助。

原文

I have a website, where I allow other developers to host content.
My aim is to log clicks on every hyperlink (even the content that is hosted by other developers) ,which exists on the page.

My initial approach was as follows:

$('a').click(function(event)
             {
                //do my logging
                return true;
             }
);

Now with the above approach , I am facing the following issues:

Developers may have images inside the anchor link, so the events target is an image rather than href
Many developers have their own way of handling an href click , using an onclick event rather than a simply href='' attr
Some developers add their custom attr , to the tag, and have custom functions to handle the clicks

so basically , the issue is , there is a huge variety of anchor tags available, and logging clicks is not as simple.
Many cases allowed me to log the data I wanted, but a few cases , broke the code badly.

My aim to post on this forum was:

to discuss what is the right approach to do hyperlink clicks logging in a dynamic environment
is there a plugin out there , which allows a functionality like this.

I know facebook and google have this , but they have a totol control, on what is being hosted in their environments.

Any help is greatly appreciated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

究竟谁懂我的在乎 2024-10-18 07:13:05

向每个链接添加点击处理程序不是一个好主意。您应该使用事件委托（它只会在文档的根部附加一个事件处理程序）：

$(document).delegate('a', 'click', function(event) {
    // logging
});

更新（17.12.2011）：

从 jQuery 1.7 开始，将使用 .on() ^[docs]< /em>：

$(document).on('click', 'a', function(event) {
    // logging
});

关于您的问题：

开发人员可能在锚链接内有图像，因此事件目标是图像而不是 href

只要传播不被取消，事件就会冒泡。这取决于您想要记录的内容。使用delegate，event.target属性将指向图像，但this（在处理程序内部）将指向a< /code> 元素。所以你在这里应该没有问题（例如：http://jsfiddle.net/cR4DE/）。

但这也意味着如果开发人员取消传播，您将错过点击。

（旁注：您可以通过在 < 中触发事件处理程序来解决此问题em>捕获阶段，但 IE 不支持这一点（因此 jQuery 也不支持）。）

许多开发人员都有自己的方式来处理 href 点击，使用 onclick 事件而不是简单的 href='' attr

这不会触及现有的事件处理程序。

一些开发人员将自定义 attr 添加到标记中，并具有自定义函数来处理点击

不确定您在这里的意思。

它还取决于如何包含其他内容。例如，上面的代码不会跟踪 iframe 中的点击。

Adding a click handler to every link is not a good idea. You should make use of event delegation (which will only attach one event handler at the root of the document):

$(document).delegate('a', 'click', function(event) {
    // logging
});

Update (17.12.2011):

Since jQuery 1.7, one would use .on() ^[docs]:

$(document).on('click', 'a', function(event) {
    // logging
});

Regarding your problems:

Developers may have images inside the anchor link, so the events target is an image rather than href

Events bubble up as long as propagation is not canceled. It depends on what you want to log. With delegate the event.target property will point to the image, but this (inside the handler) will point to the a element.
So you should have no problems here (example: http://jsfiddle.net/cR4DE/).

But that also means to you will miss clicks if the developers cancel the propagation.

(Side note: You could solve this letting the event handler fire in the capturing phase, but IE does not support this (hence jQuery does not either).)