Javascript 即使鼠标移出，Mouseenter事件也会触发两次

当页面加载时，以及在div上发生mouseenter事件时，我将向div添加两个抖动动画

我有一个名为shake1和shake2的羞耻动画，我想在页面加载和div悬停时播放它。下面是html、css和js的外观

let$image=document.querySelector（“div”）；
$image.addEventListener（“mouseenter”，function（）{
$image.style.animationPlayState=“正在运行”；
});
div{
背景：红色；
动画名称：shake1；
动画持续时间：.5s；
}
@关键帧1{
0% {
变换：平移（1px，1px）旋转（0度）；
}
10% {
变换：平移（-1px，-2px）旋转（-1deg）；
}
20% {
变换：平移（-3px，0px）旋转（1deg）；
}
30% {
变换：平移（3px，2px）旋转（0度）；
}
40% {
变换：平移（1px，-1px）旋转（1deg）；
}
50% {
变换：平移（-1px，2px）旋转（-1deg）；
}
60% {
变换：平移（-3px，1px）旋转（0度）；
}
70% {
变换：平移（3px，1px）旋转（-1deg）；
}
80% {
变换：平移（-1px，-1px）旋转（1deg）；
}
90% {
变换：平移（1px，2px）旋转（0度）；
}
100% {
变换：平移（1px，-2px）旋转（-1deg）；
}
}
div:悬停{
动画名称：shake2；
动画持续时间：.5s；
}
@关键帧2{
0% {
变换：平移（1px，1px）旋转（0度）；
}
10% {
变换：平移（-1px，-2px）旋转（-1deg）；
}
20% {
变换：平移（-3px，0px）旋转（1deg）；
}
30% {
变换：平移（3px，2px）旋转（0度）；
}
40% {
变换：平移（1px，-1px）旋转（1deg）；
}
50% {
变换：平移（-1px，2px）旋转（-1deg）；
}
60% {
变换：平移（-3px，1px）旋转（0度）；
}
70% {
变换：平移（3px，1px）旋转（-1deg）；
}
80% {
变换：平移（-1px，-1px）旋转（1deg）；
}
90% {
变换：平移（1px，2px）旋转（0度）；
}
100% {
变换：平移（1px，-2px）旋转（-1deg）；
}
}
我认为这种行为是因为您在目标元素上定义了两个不同的动画，所以当您将animationPlayState设置为“running”时，会触发这两个动画

我已更新您的代码以记录当前动画名称：


let$image=document.querySelector（“.shake”）；
$image.addEventListener（“animationstart”，函数（事件）{
console.log（event.animationName）；
})
$image.addEventListener（“鼠标指针”，函数（事件）{
$image.style.animationPlayState=“正在运行”；
});
div.shake{
背景：红色；
动画名称：shake1；
动画持续时间：.5s；
}
@关键帧1{
0% {
变换：平移（1px，1px）旋转（0度）；
}
10% {
变换：平移（-1px，-2px）旋转（-1deg）；
}
20% {
变换：平移（-3px，0px）旋转（1deg）；
}
30% {
变换：平移（3px，2px）旋转（0度）；
}
40% {
变换：平移（1px，-1px）旋转（1deg）；
}
50% {
变换：平移（-1px，2px）旋转（-1deg）；
}
60% {
变换：平移（-3px，1px）旋转（0度）；
}
70% {
变换：平移（3px，1px）旋转（-1deg）；
}
80% {
变换：平移（-1px，-1px）旋转（1deg）；
}
90% {
变换：平移（1px，2px）旋转（0度）；
}
100% {
变换：平移（1px，-2px）旋转（-1deg）；
}
}
div.shake:悬停{
动画名称：shake2；
动画持续时间：.5s；
}
@关键帧2{
0% {
变换：平移（1px，1px）旋转（0度）；
}
10% {
变换：平移（-1px，-2px）旋转（-1deg）；
}
20% {
变换：平移（-3px，0px）旋转（1deg）；
}
30% {
变换：平移（3px，2px）旋转（0度）；
}
40% {
变换：平移（1px，-1px）旋转（1deg）；
}
50% {
变换：平移（-1px，2px）旋转（-1deg）；
}
60% {
变换：平移（-3px，1px）旋转（0度）；
}
70% {
变换：平移（3px，1px）旋转（-1deg）；
}
80% {
变换：平移（-1px，-1px）旋转（1deg）；
}
90% {
变换：平移（1px，2px）旋转（0度）；
}
100% {
变换：平移（1px，-2px）旋转（-1deg）；
}
}