Javascript 捕获用户活动

Question

是否有现有的 js 库用于捕获浏览器端的用户活动？

IE。滚动、鼠标移动、鼠标点击等。我一直在谷歌搜索、stackoverflow 和 github 上搜索，但我不断收到付费分析程序的链接，但这些程序并不是我想要的。

我很想开始自己构建一些东西，但我想得越多，我就越难意识到它会变得更加困难，并且如果可用的话，我最好使用一些现有的库。

我在想什么。这是一个合适的方式吗？

• 我假设最好的方法是监听 body 或 window 元素并捕获所有未禁用冒泡的所需事件。
• 在发送/发布到服务器之前批量和缩小数据会很好。如在删除模式或频繁出现的数据中。如果用户滚动，我不需要所有滚动事件，只需要滚动开始、加速或停止的有意义的事件。
• 可以每 X 个事件数或 X 秒发出批次。并发送最后一批window.onbeforeunload。

我在这里和这里发现了这两个问题。但不完全是我所追求的。

我希望能够配置事件聚合来询问有关用户交互的问题。诚然，我对谷歌分析已经过时了，也许我是错的，但乍一看，自定义事件跟踪似乎不符合要求。记录特定的个人操作不是我所追求的。

Answer 1

也许是这样的：

DEMO

相关代码（JS和HTML）：

<script type="text/javascript">
// Array of events you want to capture
var evnts=["mousedown","click","mouseup","focus","blur","keyup","keydown","keypressed"];
// You can also Use mousemove, resize and scroll
for(var i=0;i<evnts.length;i++){
//Attach Listener for all events from array
window.addEventListener(""+evnts[i]+"", function(e){ myFunction(e); }, false);
}
// Listener:- 
function myFunction(e){
//Check If event is passed
var evt=e||window.event;
if(evt){ // If event exists
if(evt.isPropagationStopped&&evt.isPropagationStopped()){
// if event's propagation(bubbling) is stopped then DO NOTHING simply return.
    return;
}
// Get Event Type (Click or Keyup or focus etc)
var et=evt.type?evt.type:evt;
// Get Events Target (Element from which event is bubbled)
var trgt=evt.target?evt.target:window;
// Timestamp of event you can also use evt.timeStamp if supported 
var time=Math.floor(Date.now() / 1000);
// Get Where Event Occured ? events X and Y co-ordinate on Page and Scrolltop of document
var x=0, y=0, scrolltop=0;
if(evt.pageX){
x=evt.pageX;
}
if(evt.pageY){
y=evt.pageY;
}
if(trgt.scrollTop){
scrolltop=trgt.scrollTop;
}
// Get id and class of element
if(trgt.className&&trgt.id){
// BOTH id and class exists
trgt="."+trgt.className+"#"+trgt.id;
}
else if(trgt.id){
// only id exists
trgt="#"+trgt.id;
}
else if(trgt.className){
// only class exists
trgt="."+trgt.className;
}
if(typeof(trgt)!="String"){
// Neither Class nor Id is defined
if(trgt.tagName){
// If it is html tag display its tag name
 trgt=trgt.tagName;
}
else{
// No class + No Id + Not a Html tag 
    trgt=trgt.toString().toLowerCase();
    trgt=trgt.replace("[object ","");
    trgt=trgt.replace("]","");
        trgt=trgt.replace("htmlbodyelement","BODY");

}
}
// Get extra information about event
var xtra="";
if(evt.keyCode){
// If keyboard Event? get Key code
xtra+=" KeyCode: "+evt.keyCode;
}
if(evt.shiftKey){
// was Shift key pressed during occcurance of event?
xtra+=" ShiftKey ";
}
if(evt.altKey){
// was alt key pressed during occcurance of event?
xtra+=" altKey ";
}
if(evt.metaKey){
// MetaKey is used on Mac instead of ctrl Key on PC
xtra+=" metaKey ";
}
if(evt.ctrlKey){
// was ctrl key pressed on pc during occcurance of event?
xtra+=" ctrlKey ";
}
// Get windows dimensions for catching resize event
var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    xx = w.innerWidth || e.clientWidth || g.clientWidth,
    yy = w.innerHeight|| e.clientHeight|| g.clientHeight;
xtra+=" RES:"+xx+"X"+yy;

// pad output for displaying on console
et=("          " + et).slice(-10);
trgt=("               " + trgt).slice(-15);
x=("               " + x).slice(-15);
y=("               " + y).slice(-15);
scrolltop=("               " + scrolltop).slice(-15);
time=("              " + time).slice(-15);
// Show output on console
console.log("\n"+et+"\t"+trgt+"\t"+x+"\t"+y+"\t"+scrolltop+"\t"+time+"\t"+xtra);
}
}
</script> 
<!-- Some Xtra HTML To test -->
<div class="mnp" style="overflow:auto;clear:both;width:150px;height:150px;" onMouseUp="event.stopPropagation();" onMouseDown="event.stopPropagation();">
XXX<br />
XXX<br />
XXX<br />
XXX<br />
XXX<br />
XXX<br />
XXX<br />
XXX<br />
XXX<br />
XXX<br />
XXX<br />
XXX<br />XXX<br />
XXX<br />
</div>

对于下一部分，那就是定期将其发送到服务器，您可以首先AJAX将数据保存在变量中（而不是填充和记录它）。setTimeout并在每次成功的 ajax 操作（即 on ）上清除它（变量）readyState==200。您还可以发送ajax请求onbeforeunload。

简而言之，该代码实际上执行的操作是：它attaches从events数组evnts（您也可以在该数组中添加事件）全部添加到元素window（这比将其附加到所有元素要快得多），然后在以下情况下获取事件详细信息：它propogation不是stopped，有关如何获取事件描述的详细信息，请阅读代码中的注释。

希望能帮助到你 ：）！