Как правильно навесить тач-события?

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

Всем привет, нашел статью по d3.js:

Попытался на текущем примере:

Feel free to check out the source code as well as the full demonstration of this tutorial.
Добавить события:

Чтобы он также работал и на мобильных устройствах, но не могу понять, что я делаю не так. Прошу вашей помощи.

Участок кода, где я добавил тач-события:

svg
.append('rect')
.attr('class', 'overlay')
.attr('width', width)
.attr('height', height)

// .on('mouseover', () => focus.style('display', null))
// .on('mouseout', () => focus.style('display', 'none'))
// .on('mousemove', generateCrosshair)

.on('mouseover', () => focus.style('display', null))
.on('mouseout', () => focus.style('display', 'none'))

.on('touchstart', () => focus.style('display', null))
.on('touchend', () => focus.style('display', 'none'))

.on('mousemove', generateCrosshair)
.on('touchmove', generateCrosshair);

В этом примере та же самая история:


Если в последнем примере написать вот этот код:

svg.append("rect")

.attr("class", "overlay")

.attr("width", width)

.attr("height", height)

.on("mouseover", function() { focus.style("display", null); })

.on("touchstart", function() { focus.style("display", null); })

.on("mouseout", function() { focus.style("display", "none"); })

.on("touchend", function() { focus.style("display", "none"); })

.on("mousemove", mousemove)

.on('touchmove', mousemove);

То баг будет следующий: если сделать touch первый раз, то отобразиться точка на предыдущей дате, при втором нажатии уже на текущей координате.

2

Так получается потому что

  1. Пользователь потыкал в чарт. Отрисовались линии которые отмечают точку на чарте.
  2. Пользователь перестал тыкать в чарт (touchend) и линии скрылись. Но важный момент что элементы-то остались и положение их тоже осталось
  3. Пользователь начинает новый сеанс тыкания в чарт. Только ставит палец, но еще не сдвинул его. Срабатывает обработчик touchstart, который отображает элементы что указывают на точку на чарте. А положение у них осталось старое.
  4. Пользоатель начинает водить пальцем, срабатывает mousemove, который обновляет положение элементов и мы наблюдаем ожидаемое поведение.

Быстрый хак - вызывать mousemove на touchstart:

.on("touchstart", function() { focus.style("display", null); mousemove.apply(this, arguments) })

Но лучше подумай можно ли сделать аккуратнее. Я не вчитывался в реализацию mousemove, может с таким подходом появятся нежелаемые последствия.

https://blockbuilder.org/podgorniy/b97e99b1f873934e8ed7bbb5d7f63719