3
<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>

2 ответа 2

5

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>

3

Все эти "дёрганья" получаются из-за того, что курсор "заскакивает" на дочерний элемент - конкретно на 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.