Issue with mouse movement causing inaccurate coordinates

Question

Issue with mouse movement causing inaccurate coordinates

Hello there! I am facing an issue with a small project I'm working on. My goal is to have an indicator appear whenever I hover my mouse over the fishing area, but it seems like the coordinates are off when using the mousemove event. You can check out my code on this link.

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

javascript css vue.js sass gsap

Answer 1

Answer №1

Seeing that the pond is positioned in a relative manner, it is causing the circle to be incorrectly positioned when using the moveCircle() function. To ensure the circle is positioned correctly, we should make it relative to the pond's position. This means subtracting the pond's position from the client's position. The updated moveCircle() function would appear like this:

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 2

Seeing that the pond is positioned in a relative manner, it is causing the circle to be incorrectly positioned when using the moveCircle() function. To ensure the circle is positioned correctly, we should make it relative to the pond's position. This means subtracting the pond's position from the client's position. The updated moveCircle() function would appear like this:

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

Answer №2

According to the suggestion by @hasan05, follow these steps to resolve the problem:

In the .pond class, delete the line position: relative;
In the .circle class, include pointer-events: none;

Answer 4

According to the suggestion by @hasan05, follow these steps to resolve the problem:

In the .pond class, delete the line position: relative;
In the .circle class, include pointer-events: none;

Answer 5

Answer №3

When the css attributes of your pond are set to position: relative, it may be causing incorrect coordinates. It is recommended to remove this setting.

Answer 6

When the css attributes of your pond are set to position: relative, it may be causing incorrect coordinates. It is recommended to remove this setting.

Answer 7

Answer №4

position: relative; is causing inaccurate calculations.

We need to find a different approach and eliminate this issue.

Additionally, let's update the following event code:


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

Answer 8

position: relative; is causing inaccurate calculations.

We need to find a different approach and eliminate this issue.

Additionally, let's update the following event code:


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

Issue with mouse movement causing inaccurate coordinates

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Managing repeated calls to a specific get function in nodejs

Steps for retrieving the identifier of a duplicated element

Eradicate white space in a JavaScript code

Removing a Button from a Form Using JavaScript

Is it possible to utilize a designated alias for an imported module when utilizing dot notation for exported names?

Error message: jQuery AJAX request fails due to permission denial issue on Internet Explorer

Children divs unexpectedly showing up outside of their parent divs

Is your React conditional rendering malfunctioning due to state issues?

Private route displaying unexpected behavior when making API call

Can Chrome Support Bookmarklets?

Eliminating unique phrases from text fields or content sections with the help of jQuery or JavaScript

When coding on Github pages, the behavior of code blocks can vary depending on whether

What is the method for altering font color in HTML?

Unable to locate the tag using .find() function following the use of .attr() method

Ways to adjust the distance between logo and slider

Issue arises when annotation is utilized in ChartJs, as the tooltip fails to appear

Is it recommended to continue using vendor prefixes for border-radius property?

changing the color of arrows in Vue Slick Carousel: a simple guide

Utilizing jQuery to correspond with CSS media queries

Combining Objects in an Array using Node.js: A Step-by-Step Guide