Javascript 如何在光标移动时将按钮移近光标，在光标离开时将按钮移远一点

我正在尝试创建一个移动鼠标的小动画。当光标靠近按钮时，我称之为“边界”——距离按钮一定距离，按钮会向光标方向移动

在这里，为了清晰和理解，我用css展示了两个虚线边界的步骤。 我通过计算按钮的中心点，减少并增加x轴和y轴按钮的宽度和高度，从代码中创建了最近的边界线

我想在我工作的同一个过程中解决这个问题，而不是在按钮的

父元素中添加其他
事件侦听器

这是我试过的


const-button=document.querySelector（“.button”）；
设{width，height，x:buttonX，y:buttonY}=button.getBoundingClientRect（）；//提供按钮的宽度、高度、左X、上y
buttonX=buttonX+宽度/2；//x轴上按钮的中心点
按钮=按钮+高度/2；//y轴上按钮的中心点
/***************功能***************/
让距离=宽度；
让mouseHasEntered=true；
让鼠标进入按钮区；
函数mouseMove（e）{
const x=e.x；//光标的当前x
常量y=e.y；//光标的当前y
常量leftBorderLine=按钮X-距离；
常量右边界=按钮X+距离；
const topBorderLine=按钮-距离；
常量底部边界=按钮+距离；
const xWalk=（x-buttonX）/2；//鼠标在x轴上移动时移动按钮的距离
const yWalk=（y-buttonY）/2；//鼠标在y轴上移动时移动按钮的距离
鼠标按钮区=
x>左边界&&
x<右边界线&&
y>顶部边界线&&
y
*，
*：：之前，
*：：之后{
保证金：0；
填充：0；
框大小：边框框；
}
：根{
--沟lg:4rem；
--排水沟md:3rem；
--排水沟sm:1rem；
--排水沟xm:1rem；
--白色：#fff；
--黑色：#000；
}
身体{
背景：var（--黑色）；
字体：16px verdana；
颜色：var（--白色）；
}
.横幅{
显示器：flex；
高度：100vh；
}
.按钮{
保证金：自动；
光标：指针；
过渡：所有0.2秒缓解；
}
.纽扣包装{
宽度：192px；
高度：192px；
边框：1px虚线#fff；
保证金：自动；
显示器：flex；
}
.纽扣包装{
宽度：128px；
高度：128px；
保证金：自动；
/*背景：橙色*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
边框：1px虚线#fff；
}
.按钮\uuuu-like-text{
显示：块；
颜色：var（--黑色）；
背景：var（--白色）；
宽度：var（--lg）；
高度：var（--lg）；
边界半径：50%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

喜欢
如果我正确理解您的意图，我认为您需要：

添加
按钮包装器
选择器
将事件侦听器附加到
按钮包装器
而不是
窗口
：


当鼠标离开时，应重置距离。（我不确定，只是猜测这是您想要的，因为您在重置时编写
mouseHasEntered=true
）
由于您要处理鼠标，所以请不要自己（else mouseIsInButtonTerritory
部分）侦听窗口



const-button=document.querySelector（“.button”）；
设{width，height，x:buttonX，y:buttonY}=button.getBoundingClientRect（）；//提供按钮的宽度、高度、左X、上y
buttonX=buttonX+宽度/2；//x轴上按钮的中心点
按钮=按钮+高度/2；//y轴上按钮的中心点
/***************功能***************/
让距离=宽度；
让mouseHasEntered=true；
让鼠标进入按钮区；
函数mouseMove（e）{
const x=e.x；//光标的当前x
常量y=e.y；//光标的当前y
常量leftBorderLine=按钮X-距离；
常量右边界=按钮X+距离；
const topBorderLine=按钮-距离；
常量底部边界=按钮+距离；
const xWalk=（x-buttonX）/2；//鼠标在x轴上移动时移动按钮的距离
const yWalk=（y-buttonY）/2；//鼠标在y轴上移动时移动按钮的距离
鼠标按钮区=
x>左边界&&
x<右边界线&&
y>顶部边界线&&
yconst button = document.querySelector(".button");
const buttonWrapWrapper = document.querySelector(".button-wrap-wrapper");

buttonWrapWrapper.addEventListener("mousemove", mouseMove);
buttonWrapWrapper.addEventListener("mouseout", resetPositon);