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

Question

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

其实，我有这个代码：

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

是否有关于真实的用户重定向处理任何recommandations？ 我认为我们必须首先排除右键点击？ 并确保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

尝试jQuery的event.which结合.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

我建议你采用以下方法。

1. 类添加到您想要跟踪的元素：

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

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

   //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); 
   }); 
   

3. 添加尽可能多的类和事件处理程序的你想跟踪的许多事件：

   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结构您要实现的跟踪逻辑