正確的方法來跟蹤鏈接的點擊

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結構您要實現的跟蹤邏輯