What causes the glitch in getBoundingClientRect()?

Question

I am struggling with a glitch caused by getBoundingClientRect() method. (see fiddle below). The goal is to make a bar following a cursor inside a container. The aforementioned method does not return valid results. I am a beginner in terms of JS - there is most probably an obvious reason behind this. I just can't find the anwswer.

https://jsfiddle.net/aveoL210/3/

var div_moving = document.getElementById('div_moving');
var parent_div = 'parent_div';

var movingDiv = {
  getCoords: function(e) {
    var rect = e.target.getBoundingClientRect();
    var y_pos = rect.top;
    console.log(y_pos);
    var y = e.pageY;
    y = y - y_pos;
    
    return (y);
  }
};

document.getElementById(parent_div).addEventListener('mousemove', function(e){
  result = movingDiv.getCoords(e);
  div_moving.style.top = result +'px';
  div_moving.style.display = "initial";
  
});
document.getElementById(parent_div).addEventListener('mouseleave', function(){
  div_moving.style.display = "none";
});

`a glitch` - please describe in more detail - what results are you seeing, what are you expecting instead — Jaromanda X, Sep 20 '22 at 11:42
Please provide a [mcve], we wouldn't chase yor code through the internet. — ThS, Sep 20 '22 at 11:44
`if(e.target.id !== 'parent_div') return;` as the first line of `getCoords: function(e) {` will fix that — Jaromanda X, Sep 20 '22 at 11:50
You may also want to consider a solution using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) — Yogi, Sep 20 '22 at 11:50
[What is the exact difference between currentTarget property and target property in JavaScript](https://stackoverflow.com/questions/10086427/what-is-the-exact-difference-between-currenttarget-property-and-target-property) — Thomas, Sep 20 '22 at 11:53
@pilotnik you should make a [mcve] on your question so we can test it out without moving away from SO. — ThS, Sep 20 '22 at 13:19

score 1 · Accepted Answer · edited Sep 20 '22 at 12:07

The target when moving the mouse down will alternate between the moving and parent div

while adding

if(e.target.id !== 'parent_div') return;

guard to the getCoords function fixes it a little, it's still glitchy

The better solution is to get the rect of the parent_div, regardless of the e.target

So .. try this

var div_moving = document.getElementById('div_moving');
var parent_div = document.getElementById('parent_div')

var movingDiv = {
  getCoords: function(e) {
    var rect = parent_div.getBoundingClientRect();
    var y_pos = rect.top;
    var y = e.pageY;
    y = y - y_pos;

    return (y);
  }
};

parent_div.addEventListener('mousemove', function(e) {
  result = movingDiv.getCoords(e);
  div_moving.style.top = result + 'px';
  div_moving.style.display = "initial";

});
parent_div.addEventListener('mouseleave', function() {
  div_moving.style.display = "none";
});

#parent_div {
  position: relative;
  width: 50%;
  height: 300px;
  margin: 1em auto;
  border: 1px solid #333;
  background: #f0f0f0;
}

#div_moving {
  display: none;
  position: absolute;
  width: 100%;
  height: 5px;
  margin: 0;
  background: blue;
}

<div id="parent_div">
  <div id="div_moving"></div>
</div>

score 1 · Answer 2 · answered Sep 20 '22 at 12:19

In getCoords you want to get parent_div all the time, so you have to use e.currentTarget instead of e.target otherwise, when div_moving is under the cursor e.target return div_moving and all calculation goes wrong, it will move to top and when you move your mouse again all wrong things repeat.

var div_moving = document.getElementById('div_moving');
var parent_div = 'parent_div';

var movingDiv = {
  getCoords: function(e) {
    console.log(e.target.id)
    var rect = e.currentTarget.getBoundingClientRect();
    var y_pos = rect.top;
    console.log(y_pos);
    var y = e.pageY;
    y = y - y_pos;
    
    return (y);
  }
};

document.getElementById(parent_div).addEventListener('mousemove', function(e){
  result = movingDiv.getCoords(e);
  div_moving.style.top = result +'px';
  div_moving.style.display = "initial";
  
});

document.getElementById(parent_div).addEventListener('mouseleave', function(){
  div_moving.style.display = "none";
});

score 0 · Answer 3 · answered Sep 20 '22 at 11:58

The, what you called "glitch", is actually what is expected to happen. Let me tell you why:

The line e.target.getBoundingClientRect() is the source of the issue, precisely e.target.
The, so called glitch, happens when the mouse is on top of the blue line element and at this point e.target no longer points to your #parent_div and instead e.target is #div_moving.

A quick fix would be by caching #parent_div in a variable so can use it later on, and on the getCoords() method we simply replace e.target by that new variable.

Here's a live demo:

var parent_div = document.getElementById('parent_div');
var div_moving = document.getElementById('div_moving');

var movingDiv = {
  getCoords: function(e) {
    var rect = parent_div.getBoundingClientRect();
    var y_pos = rect.top;
    //console.log(y_pos);
    var y = e.pageY;
    y = y - y_pos;

    return (y);
  }
};

parent_div.addEventListener('mousemove', function(e) {
  result = movingDiv.getCoords(e);
  div_moving.style.top = result + 'px';
  div_moving.style.display = "initial";

});
parent_div.addEventListener('mouseleave', function() {
  div_moving.style.display = "none";
});

#parent_div {
  position: relative;
  width: 50%;
  height: 300px;
  margin: 1em auto;
  border: 1px solid #333;
  background: #f0f0f0;
}

#div_moving {
  display: none;
  position: absolute;
  width: 100%;
  height: 5px;
  margin: 0;
  background: blue;
}

<div id="parent_div">
  <div id="div_moving"></div>
</div>

DISCLAIMAIR: The above demo did not change a lot from the OP's original code which, by the way, can be hugely improved which is out of the scope of my answer.

What causes the glitch in getBoundingClientRect()?

3 Answers3