jQuery如何临时拦截超链接点击事件？

Question

这个问题涉及联属营销，但实际上是一个关于在超链接转到另一个网站之前拦截超链接的通用问题，您可以在其中将访问者活动记录到数据库中。

我的联盟营销客户有一个非常好的问题。想象一下这样一个场景：您通过 API 从亚马逊撤回产品（给定种子关键字）。现在想象一下，访问者点击其中一种产品即可在亚马逊上查看它。该产品的 URL 可能如下所示（这只是一个演示）：

http://www.amazon.com/dp/B0042RU3Y0/?tag=xxxxxxxxxxxxxxx-20

但猜猜有什么问题那？它没有传递该种子关键字。因此，我们不知道哪些种子关键字最有效。相反，她希望我们能够传递以下内容，然后以某种方式跟踪它：

http://www.amazon.com/dp/B0042RU3Y0/?tag=xxxxxxxxxxxxxxxx-20&seed=laptops

我没有'在亚马逊上看不到任何文档，我们可以在其中传递额外的参数，然后通过过滤器在报告中跟踪它们。

因此，我唯一能想到的是，我们需要在点击到达亚马逊之前捕获点击。换句话说，在该事件冒泡并执行之前，在 jQuery 中，我可以先拦截它，解析该超链接的 href URL，附加这个额外的种子关键字信息，通过 AJAX 将其发送回 PHP 页面和数据库表，然后释放该单击事件，以便执行该事件并且浏览器将转到 Amazon。

有谁知道这是如何在 jQuery 中完成的？我知道 AJAX 部分——只是不知道捕获点击然后释放它的点击拦截部分。

Answer 1

您可以将点击事件绑定到所有锚标记，例如

$("a").click(function(){
    // write your code
});

如果您想要执行默认操作，则在此函数的末尾添加 return true; 。

Answer 2

var seed = "&seed=laptops";
$("a").live('click',function(){
    $(this).attr('href', $(this).attr('href')+seed);
});

Answer 3

虽然这在某些情况下可能有效，但 $("a").click() 不是最好的方法，也不会拦截点击，它会在元素数组上挂钩一个事件侦听器。

它不仅意味着在加载时扫描页面中的所有链接，而且自加载时以来文档中更新的任何 ajax/动态内容都不会被拦截。这是因为我们不是拦截点击，而是在执行调用时在所有链接上挂钩事件侦听器（通常在 onDocumentReady 处 - 请注意，在此之前发生的任何点击都不会被拦截）。

更一致的方法是拦截文档中的任何点击并过滤我们想要更改的点击。

这个“过滤器”被记录为选择器 jQuery.on( events [, selecter ] [, data ], handler )< /a>

这样我们就不需要等待documentReady来添加事件监听器。

$(document).on('click', 'a', function(e) {
  $(e.target).attr('href', $(e.target).attr('href')+seed);
});

// or, as we don't need `this` anymore

$(document).on('click', 'a', (e) => {
  $(e.target).attr('href', $(e.target).attr('href')+seed);
});