Javascript捕获用户活动

Javascript capturing user activity

本文关键字：活动 用户 Javascript      更新时间：2023-09-26

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

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

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

我在想什么。这是适当的方法吗？

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

我在这里和这里找到了这两个问题。但不是我所追求的。

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

也许是这样的：

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(上清除它(变量(。您也可以发送 ajax 请求onbeforeunload 。

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

希望对:)有所帮助！

你必须自己写(或者至少我是这样做的(。

备份问题：是否有任何javascript库可以捕获鼠标/键盘事件并将其发送到外部服务器？

这是一个工作 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);
        });
    });

等等。

如果要捕获所有事件，下面是一个列表：

  • 流产
  • 印后记
  • 打印前等。是否可以在浏览器中以编程方式捕获页面上的所有事件？
相关文章：