如何让popup弹窗在其所属父div内部跟随鼠标光标移动？

问题原因 #

• 代码拼写错误：CSS属性left被误写为lef，导致横向定位规则完全不生效
• 坐标体系不匹配：event.clientX/clientY是相对于浏览器视口的全局坐标，但弹窗设置了position: absolute，父元素.svg-topo是position: relative，弹窗的top/left值需要基于父元素的左上角计算，直接用全局坐标必然出现偏移
• 重复DOM操作：mousemove事件触发频率极高，每次触发都执行append操作会造成不必要的性能损耗

修复后代码 #

const $divs = $(".domtom-container .svg-container");
let dept = {}, total = {};
$divs.each(function (i) {
    const $parent = $(this);
    const popup_topo = $("<div class='popup_topo'>" + dept + "<br/>" + total + " parrainages</div>");
    // 提前获取父元素相对于文档的偏移量
    const parentOffset = $parent.offset();
    
    $parent.on('mouseenter', function() {
        // 鼠标移入时只追加一次弹窗，避免重复DOM操作
        $parent.append(popup_topo);
    }).on('mousemove', function (event) {
        // 计算鼠标相对于父元素的坐标
        const x = event.clientX - parentOffset.left;
        const y = event.clientY - parentOffset.top;

        popup_topo.css({
            top: `${y}px`,
            left: `${x}px`,
        });
    }).on('mouseleave', function (event) {
        popup_topo.remove();
    });
});

可选优化 #

如果觉得弹窗中心点刚好对准鼠标会遮挡光标，可以调整坐标偏移，让弹窗在鼠标右下方显示：

// 可自行调整偏移数值
const x = event.clientX - parentOffset.left + 12;
const y = event.clientY - parentOffset.top + 12;

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