H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】如何拦截 a 标签的点击事件

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

回答:

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

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

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

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

回答:

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

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

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

回答:

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

回答:

回题主,具体情况集体分析,首先要明确 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"> // 后端路由处理的时候把请求参数截下来就好了

回答:

用正确的方法做对的事

回答:

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

回答:

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

回答:

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

回答:

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

本文地址:H5W3 » 【Web前端问题】如何拦截 a 标签的点击事件

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址