如何跟踪 Angular 中的全局鼠标位置？

Question

有一个有点奇怪的给你...我有一个我正在工作的网站，我需要在这个网站上操作一个非常巨大的毛茸茸的手臂用作光标。该站点有多条路线，巨手光标仅出现在其中一条路线上。我有一个操纵手的绝对定位的指令。该站点的其余部分都是 Angular，因此我对当前指令中的 jquery 路由感到有点内疚，如下所示。

<div id="big-cursor" big-hand><img src="images/hand2.png" /></div>

和

angular.module('variousAssetsApp').directive('bigHand', function () {

    var link = function($scope, element){

        $("html,body").mousemove(function(e) {
           var tarX = e.pageX;
           var tarY = e.pageY;
           element.css({
               top: tarY + 20,
               left : tarX + 20
           },0);
        });
    }


    return {
        restrict: 'A',
        link: link
    };
});

问题是，当我离开不同的路线时，我需要将这个手形光标放在正确的位置。现在，只有在到达路线后移动鼠标后它才会在正确的位置（因为指令 link 函数只在那里执行），所以 hand/arm 中有一个立即跳转一个位置到另一个位置。

有没有更好的解决办法？我唯一能想到的就是创建一个拥有当前位置的工厂，但这似乎会被调用得太多太快。我不能将光标放在当前路线之外，因为我还有一些非常繁重的 z-index 事情在进行。

有什么想法吗？

Answer 1

我看到你的问题：当指令被实例化时，没有触发 mousemove 事件（光标还没有移动），所以在光标移动之前它不能定位 bigHand。

因此，您必须跟踪鼠标在整个站点中的位置。

我会在您的文档正文中添加一个简单的指令来跟踪坐标。它可以与保存 x 和 y 值的服务配对。然后 bigHand 指令可以从服务中观察这些值并相应地重新定位手部图像。

如何跟踪 Angular 中的全局鼠标位置？

How to keep track of global mouse position in Angular?

css

angularjs

angularjs-directive