jQuery绑定document的mousemove事件异常，自定义光标效果不符合预期

我希望仅在带有特定类的部分图片上显示自定义光标，为此我已经编写了部分代码。

以下是我的代码：

function registerCursorHoverEffect() {
    if (!isTouch()) {
        const el = document.body;
        var cursorDiv = document.createElement("div");
        cursorDiv.setAttribute("id", "cursor");
        cursorDiv.setAttribute("class", "light-spot light-spot--cursor light-spot--center-center light-spot--color-red light-spot--filled light-spot--outside");
        el.before(cursorDiv);

        document.getElementById("cursor").innerHTML = '<svg class="cursor-main" xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewport="0 0 100 100" style="stroke: white; fill:white;font-size:300px; z-index: 9999999;position: absolute; top: 40px; right: 40px; bottom: 0;"><path d="M59.71,31.29l-10-10a1,1,0,0,0-1.42,1.42L56.59,31H5a1,1,0,0,0,0,2H56.59l-8.3,8.29a1,1,0,0,0,0,1.42,1,1,0,0,0,1.42,0l10-10A1,1,0,0,0,59.71,31.29Z"/></svg>';
        var cursorDivAppend = document.createElement("div");
        cursorDivAppend.setAttribute("id", "cursor-append");
        cursorDivAppend.setAttribute("class", "cursor-append");
        el.before(cursorDivAppend);

        // Mousemove
        $(document).on('mousemove', function (event) {
            if($('.col-3:hover').length != 0) {
                const appendScale = 1
                var destinationX = event.pageX;
                var destinationY = event.pageY;
                var transformScale = `translate(calc(${destinationX}px - 50%), calc(${destinationY}px - 50%)) scale(${appendScale})`
                $('#cursor').css('transform', transformScale);
            }
        })
    }
}

hover到特定类图片时生成的效果：

核心问题代码段：

// Mousemove
$(document).on('mousemove', function (event) {
    if($('.col-3:hover').length != 0) {
        const appendScale = 1
        var destinationX = event.pageX;
        var destinationY = event.pageY;
        var transformScale = `translate(calc(${destinationX}px - 50%), calc(${destinationY}px - 50%)) scale(${appendScale})`
        $('#cursor').css('transform', transformScale);
    }
})

我认为event.pageX应当始终返回相对于$(document)的当前鼠标位置，event.pageY同理，但实际运行时我获取到的始终是事件本身的位置，不清楚问题出在哪里。

更新 #

我发现自定义光标元素的宽度产生了阻挡，即便我获取的是$(document)的坐标，mousemove事件也仅在我处于自定义光标元素外部时才会触发：

解决方案 #

问题根源是你创建的自定义光标DOM元素z-index设置为9999999，层级远高于页面其他元素，默认会接收所有鼠标交互事件，导致下层的document以及.col-3元素无法正常触发hover和mousemove事件。

修复步骤

1. 给自定义光标元素添加pointer-events: none CSS属性，该属性可以让元素完全忽略所有鼠标交互事件，不会阻挡下层元素的事件触发，同时不影响元素本身的显示。可以直接给对应元素加全局样式：

#cursor, #cursor-append {
  pointer-events: none;
}

也可以在JS创建元素的时候直接设置属性：

cursorDiv.style.pointerEvents = 'none';
cursorDivAppend.style.pointerEvents = 'none';

2. 优化事件判断逻辑，避免频繁查询:hover伪类带来的性能损耗，可以改为直接监听.col-3的mouseenter和mouseleave事件控制自定义光标的显隐和跟随逻辑，参考代码如下：

let isHoverTarget = false;
// 监听目标元素的hover状态
$(document).on('mouseenter', '.col-3', function() {
  isHoverTarget = true;
  $('#cursor').show();
}).on('mouseleave', '.col-3', function() {
  isHoverTarget = false;
  $('#cursor').hide();
});

// 统一处理mousemove
$(document).on('mousemove', function (event) {
  if(!isHoverTarget) return;
  const appendScale = 1;
  const destinationX = event.pageX;
  const destinationY = event.pageY;
  const transformScale = `translate(calc(${destinationX}px - 50%), calc(${destinationY}px - 50%)) scale(${appendScale})`;
  $('#cursor').css('transform', transformScale);
})

另外建议删除你写在SVG标签内的固定top、right定位属性，完全用transform控制位置即可避免偏移问题。

内容的提问来源于stack exchange，提问作者Shinox