滚动时能否使用javascript获取鼠标位置？

Question

我有一个Codepen设置，它使用window.addEventListener('mousemove', this.mousemoveFn);获取鼠标在文档上的位置window.addEventListener('mousemove', this.mousemoveFn); ，但是，如果您开始滚动，则在您再次移动鼠标之前，交互作用将无法与鼠标位置一起使用。 所以我的问题是这样的：

有什么方法可以使用事件监听器滚动来获取页面上当前的鼠标位置？ window.addEventListener('scroll', callback);

由于使用mousemove之外的事件来获取位置，因此我不确定是否可以，但是在滚动以及移动鼠标时让元素与鼠标光标交互会很棒。

这是codepen： https ://codepen.io/IamBramer/pen/zavoBp

Answer 1

首先回答：

有什么方法可以使用事件监听器滚动来获取页面上当前的鼠标位置？

请参阅MDN wheel的事件定义：

        var event = {
            // keep a ref to the original event object
            originalEvent: originalEvent,
            target: originalEvent.target || originalEvent.srcElement,
            type: "wheel",
            deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
            deltaX: 0,
            deltaY: 0,
            deltaZ: 0,
            preventDefault: function() {
                originalEvent.preventDefault ?
                    originalEvent.preventDefault() :
                    originalEvent.returnValue = false;
            }
        };

鼠标在此对象中的位置没有任何属性（考虑滑动，无位置，仅是方向向量 ）。

现在回答：

在滚动以及移动鼠标时使元素与鼠标光标交互

您应该在元素上直接使用mouseenter事件和mouseleave事件，甚至应在mouseover事件上使用。

每当您滚动或移动时，浏览器都会执行该工作，以使您知道鼠标是进入，离开还是位于元素上方 。

注释一下，鼠标事件是常识性事件，如果什么也没有发生（鼠标不移动），则什么也没有发生，也没有移动事件。 实际上，任何钩子都可以在不通知您的浏览器的情况下更改鼠标的位置（接收较低级别的事件），因此没有任何反应。