2011-11-28 50 views
3

我需要的東西,其中:有沒有任何JavaScript庫來捕獲鼠標/鍵盤事件並將它們發送到外部服務器?

  • 可以捕獲所有的鍵盤事件
  • 可以捕獲所有鼠標事件(點擊,移動)
  • 能趕上滾動頁面,可能需要大約瀏覽器的差異護理
  • 發送數據到外部服務器使用JSONP(或其他任何東西,但不僅需要在最新的瀏覽器中工作)
  • 是相當小,最多xx kB我希望

我想找到至少有3個以上正確實施的東西。 我也可以看看像Dojo或JQuery這樣的js框架,如果他們能幫助我的話,那麼我能夠保持它足夠小嗎?

+0

當您使用「** ALL **」這個詞是指**和**之外的瀏覽器之外的鍵盤和鼠標事件嗎? (原因這是不可能的Javascript) –

+1

不,顯然不是;)我的意思是瀏覽器選項卡內的所有事件(如果它是活動的)。 –

+0

只是好奇,爲什麼你需要這麼多的用戶? – zzzzBov

回答

9

如何自己寫? :)讓我們考慮這個簡單的jQuery代碼:

把這個在您的<頭>

<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('html').mousemove(function(event){ 
       console.log("mouse move X:"+event.pageX+" Y:"+event.pageY); 
      }); 
      $('html').click(function(event){ 
       console.log("mouse click X:"+event.pageX+" Y:"+event.pageY); 
      }); 
      $('html').keyup(function(event){ 
       console.log("keyboard event: key pressed "+event.keyCode); 
      }); 
     }); 
    </script> 

如果你會去到Firefox螢火蟲或IE/Chrome開發者工具/ JavaScript控制檯,你會看到所有價值。你將需要實現你需要的數據,以及一些機制,以每兩秒鐘(使用jQuery的崗位或AJAX方法和JSON對象)

彙總後所收集的數據進行簡單的活動對象:

  • 所有鍵盤事件?是(按鍵)
  • 鼠標移動和點擊?是
  • 可以捕捉頁面滾動嗎?可行
  • 可能關注瀏覽器的差異 - 這是jquery的主要目標
  • 使用JSONP發送數據到外部服務器?確保只使用$阿賈克斯或$。員額
  • 是相當小的,頂多XX KB我希望 - jQuery的it'self圍繞31KB minfied/gzip壓縮

這不是防彈的,你需要的服務器部分(簡單的php/asp.net mvc頁面反序列化json並將其存儲到你需要的db/xml whaterver中),並且你準備好了:)

根據下面有關批量處理數據的評論 - 非常好點。改變。鼠標移動事件:

  $('html').mousemove(function(event){ 
       console.log("mouse move X:"+event.pageX+" Y:"+event.pageY); 
       var color = 'red'; 
       var size = '2px'; 
       $("body").append(
        $('<div></div>') 
         .css('position', 'absolute') 
         .css('top', event.pageY + 'px') 
         .css('left', event.pageX + 'px') 
         .css('width', size) 
         .css('height', size) 
         .css('background-color', color) 
       ); 
      }); 

將使它更容易想象將有多少數據是 - 每個點會是一個POST到遠程服務器

+1

而不是'console.log',你可以很容易地使用'$ .get'把數據發送到遠程服務器。儘管您可能希望對事件進行批處理,以便在有人抓取鼠標時不發送數百個請求。 –

+1

發送聚合數據「onBeforeUnload」可能是有效的,也許每隔30秒發送一次。 –

0

這個問題聽起來像一個XY Problem。我認爲你真正想要的是一個系統,它可以讓你在網頁瀏覽器上記錄用戶事件並報告這些事件。通常,這種類型的功能不是作爲部分產品存在,而是完整的解決方案。我知道的唯一解決方案是這種跟蹤AND提供報告的類型是Adobe Omniture(來自個人經驗)。在寫這篇文章的時候,這個網站似乎很糟糕。

相關問題