Все эти "дёрганья" получаются из-за того, что курсор "заскакивает" на дочерний элемент - конкретно на h1
.
В идеале нужно подправить код, чтобы данного "бага" не было.
Но если лень, можно использовать для h1
CSS свойство pointer-events: none;
(p.s. обратите внимание на поддержку)
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;
pointer-events: none;
}
<div id="wrapper">
<h1 id='h1'>Nanana</h1>
</div>