EventListener mousemove 其他元素创建问题

Question

我对 mousemove 事件监听器有问题

<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>

这使得这 3 个元素 balon1 balon2 和 balon3 稍微远离鼠标。

当我添加到具有 class .balon1、.balon2 和 .balon3 样式 pointer-events:none 的元素时一切正常，因为鼠标光标忽略了这些元素。

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

当我将鼠标悬停在其中包含某些东西的任何 <div> 上时，它开始使它变得怪异，这 3 个元素向左和向右移动，向左和向右移动，类似于抖动效果。

当悬停在任何 <a href> 上时，它会使 eventlistener mousemowe 停止工作。

知道如何在不向所有元素添加 pointer-events:none 和 z-index:-# 的情况下使此事件始终正常工作吗？

Answer 1

找到解决方案！

而不是使用 event.offsetX 和 event.offsetY，只需将其更改为 event.clientX 和 event.clientY

EventListener mousemove 其他元素创建问题

EventListener mousemove other elements create issues

html

javascript

css

addeventlistener

找到解决方案！