Javascript 网站热图如何获得准确的数据？

有像crazyegg.com这样的服务可以向你显示访问者在你的网页上放置鼠标光标的位置。我的问题是，鉴于人们有不同的屏幕宽度，他们如何确保我的x坐标与另一个人的x坐标在页面上的位置相同？这意味着，两个人可能有相同的鼠标x坐标，但由于屏幕的宽度不同，他们的鼠标将位于网页的不同部分

---

如何创建一个考虑到这一点的网页热图服务，并可以在多个不同的网站上以不同的内容大小缩放和使用？

您可以按元素（如主内容div）而不是整个视口收集x&y数据。通过这种方式，您可以丢弃死区，死区取决于用户的分辨率。

您可以将clickhandler添加到正文或包装器div（当您的内容在屏幕上居中时，最好使用

边距：auto

）来保存页面的所有内容。传入的MouseEvent保存screenX/Y和clientX/Y坐标，其中，前者是从屏幕左上角开始的坐标，另一个是基于body或wrapper div的上/左角的坐标。使用clientX/Y坐标可以轻松创建热图，从而使您在不同的屏幕大小上相对于内容具有相同的起点。

这仅在以下情况下相关：您的页面居中。如果从左上角开始，则分辨率无关紧要。我曾经尝试过这样的服务，他们对居中布局有专门的说明。通过结合使用文档高度和宽度以及内容高度和宽度，你将能够计算出用户光标在网站内容上的确切位置。如果你知道你的网站上有多少填充（这是可以计算出来的），那么这真的很简单。有没有可能在没有网站所有者输入的情况下动态获取内容的高度和宽度？@levi Yes。简单吗？这取决于网站。当你提供热图服务，在多个不同的网站上使用时，这将如何工作？也就是说，不能期望客户输入主divId@levi为什么不呢？向服务提供特殊信息以改变其默认行为并不罕见。我认为让网站所有者最初在其网站内容周围画一个边界框可以实现这一好主意。您可以根据元素生成热图，只需在屏幕的该部分注册鼠标活动。虽然不那么准确，但我认为这是一个好的方向。