javascript – How to remove jerking when moving the mouse

Question:

<body>
    <style>
        #wrapper{
            width: 500px;
            height: 500px;
            border: 2px solid #000;
            position: absolute;
        }
        #h1{
            position: relative;
            margin: 0;
        }

    </style>
    <div id="wrapper"><h1 id='h1'>Nanana</h1></div>

<script>
var word = document.getElementById('h1');
var wrapper = document.getElementById('wrapper');
    function click(event){
        var wx = event.offsetX;
        var wy = event.offsetY;
        word.style.left = wx + 'px';
        word.style.top = wy + 'px';
    }

    wrapper.addEventListener('mousemove', click);
</script>

</body>

var word = document.getElementById('h1');
var wrapper = document.getElementById('wrapper');

function click(event) {
  var wx = event.offsetX;
  var wy = event.offsetY;
  word.style.left = wx + 'px';
  word.style.top = wy + 'px';
}

wrapper.addEventListener('mousemove', click);
#wrapper {
  width: 500px;
  height: 500px;
  border: 2px solid #000;
  position: absolute;
}

#h1 {
  position: relative;
  margin: 0;
}
<div id="wrapper">
  <h1 id='h1'>Nanana</h1>
</div>

Answer:

var word = document.getElementById('h1');
var wrapper = document.getElementById('wrapper');

function click(event) {
  var wx = event.pageX;//offsetX;
  var wy = event.pageY;//offsetY;
  word.style.left = wx + 'px';
  word.style.top = wy + 'px';
}

wrapper.addEventListener('mousemove', click);
#wrapper {
  width: 500px;
  height: 500px;
  border: 2px solid #000;
  position: absolute;
}

#h1 {
  position: relative;
  margin: 0;
}
<div id="wrapper">
  <h1 id='h1'>Nanana</h1>
</div>
Post Views: 0
Scroll to Top