dojo 是否有任何javascript库来捕获鼠标/键盘事件并将其发送到外部服务器?

np8igboo  于 2022-12-08  发布在  Dojo
关注(0)|答案(4)|浏览(181)

我需要的是:

  • 可以捕获所有键盘事件
  • 可以捕获所有鼠标事件(单击、移动)
  • 我可以捕获页面滚动,可能会考虑浏览器的差异
  • 使用JSONP(或其他任何东西,但不仅需要在最新浏览器中工作)将数据发送到外部服务器
  • 非常小,我希望最多为xx kB

我想找到至少有3个以上的正确实现的东西。我也可以看看像Dojo或JQuery这样的js框架,如果它们能帮助我的话,但我能让它足够小吗?

sr4lhrrt

sr4lhrrt1#

自己写怎么样?:)让我们考虑一下这个简单的jquery代码:
把这个放在你的< head >

<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 firebug,或者IE/Chrome开发工具/ javascript控制台,你会看到所有的值。你需要用你需要的数据实现简单的事件对象,以及一些每隔几秒钟发布收集到的数据的机制(使用jquery post或 AJAX 方法和JSON对象)
总结:

  • 所有键盘事件-是(按键)
  • 鼠标移动和单击?是
  • 可以捕捉页面滚动?doable
  • 可能会考虑浏览器的差异-这是jquery的主要目标
  • 使用JSONP将数据发送到外部服务器?确定只使用$. AJAX 或$.post
  • 很小,我希望最多为xx kB- jquery本身压缩/压缩后大约为31 kb

它不是防弹的,你需要服务器部分(简单的php/asp.net mvc页面来反序列化json并将其存储到db / xml中,不管你需要什么),然后你就可以开始了:)
根据下面关于批处理数据的注解-非常好的观点。将.mousemove事件更改为:

$('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

but5z9lq

but5z9lq2#

这个问题听起来像是XY Problem。我想你真正需要的是一个系统,它可以让你在浏览器上记录用户事件并报告这些事件。通常这种类型的功能并不是作为一个部分产品而存在,而是一个完整的解决方案。我所知道的唯一一个能够进行这种类型的跟踪并提供报告的解决方案是Adobe Omniture(从个人经验)。什么是可怕的,截至本文写作的网站似乎是关闭。

lkaoscv7

lkaoscv74#

在使用RXJS的情况下,您可以用一种更优雅的方式来完成。

import { fromEvent, merge } from "rxjs";
import { debounceTime } from "rxjs/operators";

merge(
  fromEvent(document, "keyup"),
  fromEvent(document, "mousemove")
).pipe(debounceTime(1000))
  .subscribe(response => {
    console.log(response);
});

我知道这个问题很老了。只是想用RXJS方法添加一个答案。

相关问题