Question

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

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

我很想开始自己构建一些东西，但是我想的越多，我就越难意识到它会变得更好，如果有的话，我会更好地使用现有的lib。

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

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

我发现了这两个问题here＆amp; here。但不是我想要的。

我希望能够配置事件聚合以询问有关用户交互的问题。不可否认，我已经过时了Google Analytic，也许我错了，但一眼就能看出自定义事件跟踪不符合要求。记录特定的个人行为不是我追求的目标。

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操作（即readyState==200）上清除它（变量）。您还可以send ajax request onbeforeunload。

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

希望有所帮助：）！

Answer 2

你必须自己写（或者至少是我所做的）。

备份问题：Is there any javascript library to capture mouse/keyboards events and send them to external server?

这是一个有效的jsfiddle：http://jsfiddle.net/94dd343y/

        $(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);
        });
    });

等等。

如果您想捕获所有事件，请输入以下列表：

abort
afterprint
beforeprint等Is it possible to programmatically catch all events on the page in the browser?

Javascript捕获用户活动

2 个答案:

`DEMO`