Javascript EventListener鼠标移动其他元素创建问题

我对mousemove eventlistener有问题

<div id="banner">
<img class="balon1" src="<?php echo get_stylesheet_directory_uri(); ?>/img/page/obiekt2.png"/>
<img class="balon2" src="<?php echo get_stylesheet_directory_uri(); ?>/img/page/obiekt1.png"/>
<img class="balon3" src="<?php echo get_stylesheet_directory_uri(); ?>/img/page/obiekt3.png"/>
   <div class="row h-100" style="position: relative; z-index:300; pointer-events: all;">
       <div class="col-md-6 align-self-center">
           <h1 style="font-size:60px;">LOREM IPSUM<br/>
                DOLOR SIT<br/>
                AMET GRAVIDA</h1>
            </div>
            <div class="col-md-6 align-self-center">
               <p class="g-pt-50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non mauris at ex fringilla interdum. Nullam dignissim erat venenatis ex molestie, id viverra augue dictum. Duis congue laoreet finibus.</p>
               <a href="" class="white-button">Zobacz ofertę</a>
        </div>
    </div>
</div>

<style>
   .h-100{
     height:100%;
   }
    #banner{
        position: relative;
        min-height:600px;
        height:calc(100vh - 340px);
        width:100%;
        overflow: hidden;
    }
#banner .balon1{
        position: absolute;
        top:5%;
        right:45%;
        pointer-events: none;
        z-index:10;
        transition: 1.5s;
        transition-timing-function: ease-out;
        animation: balon1 10s infinite;
    }
    #banner .balon2{
        position: absolute;
        top:30%;
        right:51%;
        pointer-events: none;
        z-index:150;
        transition: 1s;
        transition-timing-function: ease-out;
        animation: balon2 10s infinite;
    }
    #banner .balon3{
        position: absolute;
        top:10%;
        right:5%;
        pointer-events: none;
        z-index:200;
        transition: 0.8s;
        transition-timing-function: ease-out;
        animation: balon3 10s infinite;
    }
</style>

<script>
const balon3 = document.querySelector(".balon3");
const balon2 = document.querySelector(".balon2");
const balon1 = document.querySelector(".balon1");

window.addEventListener("mousemove", function(event){
  balon3.style.transform = "translate(" + -event.offsetX / 20 + "px ," + -event.offsetY / 10 + "px)";
  balon2.style.transform = "translate(" + -event.offsetX / 26 + "px ," + -event.offsetY / 13 + "px)";
  balon1.style.transform = "translate(" + -event.offsetX / 32 + "px ," + -event.offsetY / 16 + "px)";
});
</script>

/img/page/obiekt2.png“/>
/img/page/obiekt1.png“/>
/img/page/obiekt3.png“/>
LOREM IPSUM

多洛坐

艾米特孕妇
Lorem ipsum Door sit amet，是一位杰出的领导者。他是一位来自世界各地的杰出人士。他是一位杰出的威尼斯人，他是一位伟大的政治家，他是一位杰出的政治家
.h-100{
身高：100%；
}
#横幅{
位置：相对位置；
最小高度：600px；
高度：计算（100vh-340px）；
宽度：100%；
溢出：隐藏；
}
#巴伦1号旗{
位置：绝对位置；
最高：5%；
右：45%；
指针事件：无；
z指数：10；
过渡：1.5s；
过渡定时功能：缓解；
动画：巴伦10秒无限；
}
#巴伦2号旗{
位置：绝对位置；
最高：30%；
右：51%；
指针事件：无；
z指数：150；
过渡：1s；
过渡定时功能：缓解；
动画：巴伦2 10秒无限；
}
#巴伦3号旗{
位置：绝对位置；
排名前10%；
右：5%；
指针事件：无；
z指数：200；
过渡：0.8s；
过渡定时功能：缓解；
动画：巴伦3 10秒无限；
}
const balon3=document.querySelector（“.balon3”）；
const balon2=document.querySelector（“.balon2”）；
const balon1=document.querySelector（“.balon1”）；
addEventListener（“mousemove”，函数（事件）{
balon3.style.transform=“translate（“+-event.offsetX/20+”px，“+-event.offsetY/10+”px）”；
balon2.style.transform=“translate（“+-event.offsetX/26+”px，“+-event.offsetY/13+”px）”；
balon1.style.transform=“translate（“+-event.offsetX/32+”px，“+-event.offsetY/16+”px）”；
});

这使得balon1、balon2和balon3这三个元素从鼠标上移开一点

当我使用style

指针事件：none

添加到具有class.balon1、.balon2和.balon3的元素时，一切都正常，因为鼠标光标忽略了这些元素

但当我添加带有文本和按钮的元素时，它开始产生问题

当我将鼠标悬停在任何一个里面有东西的

上时，它开始让它工作起来很奇怪，这3个元素向左和向右移动，向左和向右移动，就像震动效果一样

当鼠标悬停在任何

上时，它会使eventlistener鼠标停止工作

您知道如何使此事件始终正常工作，而不向所有元素添加

指针事件：none

，并且

z-index:-35;

？

找到了解决方案！

---

不要使用

event.offsetX

和

event.offsetY

，只需将其转换为

event.clientX

和

event.clientY

就可以了。clientY

需要从您的项目中获得更多代码，包括html标记添加更多带有html和样式的代码。我正在使用Google Chrome。我也尝试将鼠标悬停在链接上，但没有停止工作。你正在使用哪个浏览器？试试chrome，也试试隐姓埋名模式。我想我发现了问题，但仍然没有解决方法。当你悬停在按钮上时，它们会回到原来的位置，按钮是新的，显示鼠标位置…已经找到解决方案，请在底部回答。