如何拦截 a 标签的点击事件

有这么一个需求，统计一个 a 链接的点击次数，这个 a 链接是在当前页面打开，统计是方式是向后台发一个 ajax 请求。
这时就会有问题，因为点击完链接页面就直接跳转了，导致有些时候会统计不到。
有没有方法能够确认 ajax 请求返回了再跳转页面，不想使用 window.location 的方法跳转，想以 a 链接默认的后续跳转处理，因为也有可能 a 链接是新窗口打开的。

为什么不在那个a标签的指向想的url后添加一个参数呢？（譬如:from=that_a）,这样你可以通过分析请求的日志来统计那个a标签点击的个数，不过这有个弊端是会有作弊。

点击我如果想要做跳转的话，在ajax 的success里面做就好了。window.location.href= 'xxx' .
有同学说用正确的方法做正确的事，不清楚说的的是不是button，用button也可以。不过注意的是：用button的时候，鼠标放上去的时候不会显示小手。这里给button加上一个属性 hover{cursor:pointer}就可以了。

为什么不使用window.location的方法跳转?

考虑个简单的问题：如果是屏幕阅读器，或鼠标出现故障的用户，用Tab+Enter来访问的，甚至于搜索引擎索引，都不会触发onClick。

所以在这个环节截获点击统计，恐怕不是个好想法。为什么不在后续打开的页面里统计点击次数呢？

如果一定要这么做，然后还不想用window.location跳转，也许就只能试试同步ajax请求能不能做到了。

回题主，具体情况集体分析，首先要明确 href 的指向是内部还是外部

<script> 和 <image>是可以通过 src属性实现跨域的，<a>不行

跨域怎么办

一般的点击统计都是用图像ping 来实现的，需要为锚点绑定点击事件

var img = new Image();
document.querySelector('a[href^="http"]').addEventListener('click', function(e) {
    e.preventDefault(); 
    // 楼主不想用脚本定向的话就忽略上面这行和location那行
    // 至于统计请求是否成功就看和锚点的定向速度谁快了，失败概率很大
    img.src = "http://www.example.com/detect?from_anchor=anchor_a";
    location.href = this.href;
}, false);

不跨域怎么办

不跨域就好办了


<a href="http://localhost:8080/detect?from_anchor=anchor_a">
// 后端路由处理的时候把请求参数截下来就好了

原来好多人都遇到这个需求了，总之就是想用一个a做一堆事，点击时又要统计，同时还是打开新窗口，原页面还是在IFrame里的（不会也是微博分享吧），第一次我是说服他们加了个按钮，第二次是在处理之前都阻止a的默认事件，不想再碰见第三次了，楼上的方法如果不需要等返回的那写在click事件里也可以吧，如果要等返回的话提前触发也没作用吧

可以mouseover，如果需要对返回值做处理，可以先禁用href的跳转，处理完成后再location.href，这样是否可以？

用正确的方法做对的事

半年前遇到过同样情况, 这个问题最简单最佳解决方案:

不要用onclick()触发ajax统计, 改用mousedown().

解析:
1.onclick()整个过程包含mousedown()和mouseup().
2.a链接跳转是在mouseup()之后才触发.

这样的结果是: ajax会在跳转前触发, 虽然说鼠标按下->松开的时间很短, 但是现今电脑和浏览器足以完成任务.

【热门文章】