Question

我试图找到最详尽/兼容的解决方案来跟踪我网站内的一些链接。

实际上，我已经使用了这段代码：

$(".article-content a").each(function() {
    $(this).click(function() {
        // Tracking code here
    });
});

是否有关于真实用户重定向处理的建议？我想我们首先要排除右键点击？还要确保Ctrl-Click，MouseWheel-Click，Touch事件，键盘导航等等都能正确处理，例如GA事件？

Answer 1

制作这样的东西

$('.asdfasdf').mousedown(function(e) {
    switch (e.which) {
        case 1:
            //Left Mouse button pressed
            break;
        case 2:
            //Middle Mouse button pressed
            break;
        case 3:
            //Right Mouse button pressed
            break;
        default:
            //asdfasdf
    }
});

这里有一些文档：jQuery-Doc

Answer 2

结合event.which尝试jQuery的.mousedown。类似的东西：

$('.article-content a').mousedown(function(event){
    var message = 'click';
    if (event.ctrlKey) message += ' ctrl';
    if (event.shiftKey) message += ' shift';

    switch (event.which) {
        case 1:
           message = 'left ' + message;
           break;
        case 2:
           message = 'middle ' + message;
           break;
        case 3:
           message = 'right ' + message;
           break;
    }

    alert(message);
});

Answer 3

使用带参数的函数来处理点击

$(".article-content a").each(function() {
    $(this).click(function(e) {
      if(e.ctrlKey) {
        //Ctrl+Click
      }
      if(e.altKey) {
        //Alt+Click
      }
      ...
    });
});

将e记录到控制台以获取更多信息

您可以通过移动设备收听其他活动：tap, taphold, swipe, swipeleft...

$(".article-content a").on("tap",function(){
  #element is tapped
});

Answer 4

我建议您采用以下方法。

为要跟踪的元素添加一个类：

  < a class="trackMouseClick" >I want to be tracked onclick< / a >

为每个类定义事件处理程序：

//the actual event handler
//here you can implement the logic for each kind of event
function mousedownHandler(e){
    console.log('target element: ' + e.target + '\tbutton clicked: ' + e.which);
}

//the event binder
//remark: the event is bound only for the elements feature the proper class
$('.trackMouseClick').on('mousedown',function(e){
    mousedownHandler(e);
});

为要跟踪的事件添加尽可能多的类和事件处理程序：

function mousedownHandler(e){
    console.log('target element: ' + e.target + '\tbutton clicked: ' + e.which);
}

function tapHandler(e){
    console.log('target element: ' + e.target);
}


$('.trackMouseClick').on('mousedown',function(e){
    mousedownHandler(e);
}).on('tap',function(e){
    tapHandler(e);
});

主要优点是：

模块化：您可以添加和删除事件处理程序，只需在DOM元素中添加和删除类
解耦：使用类将DOM结构与您要实现的跟踪逻辑分开

正确的方法来跟踪链接的点击

4 个答案: