Как отсчитывает расстояние свойство event.ClientX?

Вопрос-ответ JavaScript
1

В этом примере https://jsfiddle.net/07am5rk0/ блок div шириной 80 пикселей двигается при клике по нему на 80 пикселей влево. Но при первом клике он почему-то смещается на 120 пикселей: http://joxi.ru/vAWLD7zI14n8Yr
За счет чего это происходит?

2

В примере что ты кинула все происходит именно как описано: при клике получаешь координату (clientX) и плюсуешь к ней 80, и записываешь в left узла. Получается узел сдвигается на clientX + 80 пикселей. Это значение будет разным, зависит от конкретной точки клика, может быть и 140, может 150.

Как стоит задача? Сдвигать элемент при каждом клике на 80 пикселей вправо? Если так, что стратегия должна быть другой: https://jsfiddle.net/07am5rk0/1/

3

Спасибо! понятно… я думала, что “style.left = x+‘px’” будет добавлять по 80рх от правого края этого блока… Задача - по каждому клику сдвигать равномерно на 80рх. Подскажи идею как это сделать

4

Я выше написал пример. Вот он же, но ночище https://jsfiddle.net/07am5rk0/2/

1 лайк
5

А если вместо клика заменить событие на нажатие по кнопке (пример здесь - https://jsfiddle.net/07am5rk0/3/) почему оно не срабатывает? не работает именно функция переменной moveLeft, и в консоли ошибок не выдает.
Но если обработчик события вынести из функции (пример здесь - https://jsfiddle.net/07am5rk0/4/ ) - тогда работает, но только при первом нажатии на клавишу Стрелка Вправо. Там что-то с подпиской на событие. StopPropagation не помогает. (Этот пример почему-то в JSFiddle не работает, но у меня локально все ОК).

6

Потому что событие не происходит на том узле, на который ты навесила обработчик. Ты хочешь ловить события нажатия на всем документе. https://jsfiddle.net/07am5rk0/5/

Работает потому то обработчик навесился на window.

document.querySelector('.player').style.left = 80 +'px'; От такого кода странно ожидать чего-то другого. Подумай что именно тут написано.

А как ты это поняла? Например ставила console.log в тело обрабочика?

7

то есть, чтобы навешивать обработчики на нажатия клавиш, для этого использовать свойство https://developer.mozilla.org/ru/docs/Web/API/Document/documentElement получается…

при нажатии на кнопку добавляется свойство left: +80 пикселей. То есть: начальная позиция элемента 0рх, нажали на кнопку - добавился стиль left: 80px, потом снова нажали на кнопку этот left должен иметь позицию 160 пикселей, потому что стартовой его точкой было left:80px. Или ты хочешь сказать что при каждом нажатии на кнопку этому блоку присваивается одно и то же значение - всегда left:80px ? Если да, то как задавать ему новую стартовую позицию в зависимости от предыдущего движения? (если я правильно формулирую вопрос)

8

document.querySelector('.player').style.left = 80 +'px'; это просто записывание нового значения в свойство объекта. И значеним этого свойства будет всегда строка ‘80px’.

Это было в моем примере. Как отсчитывает расстояние свойство event.ClientX? - #4 от пользователя dmitry

9

что такое node здесь: “parseInt(node.style.left) || 0” ? Откуда оно берет стартовое значение?

и если я добавляю условие нажатия кнопки Вправо

           if (event.keyCode == 39) {
      nodeLeft = parseInt(node.style.left) || 0
      node.style.left = (nodeLeft + 80)+'px';
     }

то оно выдает ошибку “node is not defined” (в консоли браузера), пример здесь:
https://jsfiddle.net/07am5rk0/7/

10

Прочти внимательно мой код.

1 лайк