鼠标移动给出错误的坐标

Question

美好的一天！我的小项目有问题。我希望实现的是，每当我将鼠标悬停在我的钓鱼区域时，就会出现一个指示器。但是，tt 似乎在 mousemove 事件上给出了错误的坐标，或者我错了。我有我的 codepen.

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

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 });
        });

Answer 2

由于pond相对定位，所以circle定位不正确所以在定位时在 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 3

基于@hasan05 执行此操作，它将解决您的问题：

从class.pond删除position: relative;
在class .circle 添加 pointer-events: none;

Answer 4

你池塘的 css 属性 position: relative 给你错误的坐标，删除它。

鼠标移动给出错误的坐标

Mousemove giving wrong coordinates

javascript

css

sass

vue.js

gsap