Mousemove дает неправильные координаты

Question

Добрый день! У меня проблема с моим маленьким проектом. sh я добиваюсь, чтобы при наведении курсора мыши на область рыбалки появлялся индикатор. Однако, tt, кажется, дает неправильные координаты на событии mousemove , или, возможно, я ошибаюсь. У меня здесь мой кодовый блок .

HTML

<div class="game-content">
  <div class="pond">
    <div id="circle" class="circle"></div>
    <div id="pond__fishing-area" class="pond__fishing-area"></div>
  </div>
</div>

JS

new Vue({
  el: '#app',
  mounted() {
    let circle = document.getElementById("circle");
    let circleRect = circle.getBoundingClientRect();
    let wrapper = document.getElementById("pond__fishing-area");
    let wrapperRect = wrapper.getBoundingClientRect();

    function moveCircle(e) {
      gsap.to(circle, 0.3, {
        css: {
          left: e.clientX,
          top: e.clientY
        }
      });
    }
    wrapper.addEventListener("mouseover", function() {
      gsap.to(circle, 0.4, { scale: 1, autoAlpha: 1 });
      wrapper.addEventListener("mousemove", moveCircle);
    });

    wrapper.addEventListener("mouseout", function() {
      gsap.to(circle, 0.4, { scale: 0.1, autoAlpha: 0 });
    });
  }
})

Answer 1

css свойства вашего пруда, который position: relative дает вам неправильные координаты, удалите это.

Answer 2

на основе @ hasan05 сделайте это, и это исправит вашу проблему:

• из класса .pond удалить position: relative;
• в классе .circle добавить pointer-events: none;

Answer 3

Поскольку пруд позиционируется относительно , поэтому круг позиционируется неправильно, поэтому при позиционировании круга в moveCircle(). Нам нужно расположить круг относительно относительно пруда . т.е. нам нужно вычесть позицию пруда из позиции клиента. moveCircle() будет выглядеть так:

  function moveCircle(e) {
        let position=document.getElementById("circle").parentElement.getBoundingClientRect();
// position will contain the position of pond
          gsap.to(circle, 1, {
            css: {
              left: e.clientX-position.x,// giving relative position to circle
              top: e.clientY-position.y
            }
          });
        }

new Vue({
  el: '#app',
  mounted() {
    let circle = document.getElementById("circle");
    let circleRect = circle.getBoundingClientRect();
    let wrapper = document.getElementById("pond__fishing-area");
    let wrapperRect = wrapper.getBoundingClientRect();

    function moveCircle(e) {
    let position=document.getElementById("circle").parentElement.getBoundingClientRect();
// position will contain the position of pond

      gsap.to(circle, 1, {
        css: {
          left: e.clientX-position.x, // giving relative position to circle
          top: e.clientY-position.y
        }
      });
    }
    wrapper.addEventListener("mouseover", function() {
      gsap.to(circle, 0.4, { scale: 1, autoAlpha: 1 });
      wrapper.addEventListener("mousemove", moveCircle);
    });

    wrapper.addEventListener("mouseout", function() {
      gsap.to(circle, 0.4, { scale: 0.1, autoAlpha: 0 });
    });
  }
})

@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
* {
  font-family: 'Roboto', sans-serif;
}

.game-content {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
}
.game-content .circle {
  height: 50px;
  width: 50px;
  background-color: red;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  z-index: 3;
  pointer-events:none;
}
.game-content .pond {
  width: 700px;
  height: 400px;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
          position:relative;
}
.game-content .pond .pond__fishing-area {
  position: absolute;
  width: 600px;
  height: 200px;
  background: blue;
  bottom: 20px;
  border-radius: 50%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="game-content">
    <div class="pond">
      <div id="circle" class="circle"></div>
      <div id="pond__fishing-area" class="pond__fishing-area"></div>
    </div>
  </div>

Answer 4

position: relative; дает неправильный расчет.

удалите это и спроектируйте другим способом.

, а также измените это событие,

       wrapper.addEventListener("mouseout", function(event) {      
        var e = event.toElement || event.relatedTarget;
          if(e == circle) {
            return;
          }
          gsap.to(circle, 0.4, { scale: 0.1, autoAlpha: 0 });
        });