Как получить touchstart для постоянного обновления touch.radiusX? ES6

1

Я пробовал все, чтобы получить touchstart для обновления touch.radiusX постоянно... но ничего не работает.

По какой-то причине setInterval не работает.



То, что я пытаюсь достичь
Я пытаюсь имитировать force touch через постоянное обновление touch.radiusX пока touchstart touch.radiusX touchstart.


Берегись
Это для кнопок веб-сайта.
Да, я знаю о touch.force
Но я не хочу touch.force из-за этого не работает на Android.


Что я знаю
Я знаю, что touch.radiusX поддерживается как для android и для iOS.
Так что в принципе, если я смогу получить постоянное обновление touch.radiusX а touchstart
Я могу имитировать force.touch на обеих платформах.

Что я имею
На данный момент я могу получить touch.radiusX.
Но только один раз за один touchstart.
Мне нужно, чтобы он был постоянно, пока пользователь touching элемента.


Как это должно выглядеть

On touchstart
every X-milliseconds
element.innerHTML = touch.radiusX On touchend reset to 0

var src = document.getElementById("myElement");
src.addEventListener('touchstart', rotate);

function rotate(e) {
  var touch = e.changedTouches.item(0);
  e.preventDefault();
  src.innerHTML = touch.radiusX
};
<div id="myElement" style="width: 100%; height: 100%; background: #f5f5f5; position: fixed;">

</div>
  • 0
    Возможно, вам следует отредактировать свой вопрос и добавить к нему соответствующие теги. Потому что люди, которые просто видят Javascript, как и я, понятия не имеют, о чем вы говорите.
  • 0
    Это javascript… это чистый javascript ES6
Показать ещё 3 комментария
Теги:
ecmascript-6

1 ответ

0

Это может работать, если радиус X обновляется до изменений:

var src = document.getElementById("myElement");
src.addEventListener('touchstart', rotate, true);

function rotate(e) {
var touch = e.changedTouches.item(0);
e.preventDefault();
setTimeout(function detect(){
src.innerHTML = touch.radiusX;
if(touch. .radiusX===0){return; };
detect();
}, 16);
};
<div id="myElement" style="width: 100%; height: 100%; background: #f5f5f5; position: fixed;">

</div>
Поделиться
  • 0
    Это не сработало. Он делает то же самое, что и раньше ... он просто обновляется один раз.
  • 0
    Я не уверен, если это ограничение радиуса X или нет.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню