события touchstart и touchend в ionic 3

Я ищу отдельный обработчик событий в Ionic 3 для запуска и завершения прикосновения к элементу HTML в мобильном приложении.

Я нашел много связанных и решенных вопросов, но ни одного для Ionic 3, который в настоящее время, кажется, поддерживает только «касание, нажатие, панорамирование, пролистывание, поворот и сжатие» (https://ionicframework.com/docs/компоненты/#жесты). И ни один из них, похоже, не предоставляет «обработчик» в начале, а только в конце. Я вижу, что тогда они дают данные о длительности касания (deltaTime), но к этому моменту это бесполезно для моих целей.

Для большего контекста я хочу очистить связанный тайм-аут в тот момент, когда экран впервые коснулся элемента, а затем посмотреть, заканчивается ли это касание того же конкретного элемента в течение определенного времени (например, 250 мс, так что это может быть оценено как «кран»).

Например что-то вроде этого:

JS:

timeout_1 = setTimeout(function() {
    // do something if timeout_1 not cleared by touch start
}, 4000);

touched(event) {
    clearTimeout(timeout_1);
    touching_x = true
    timeout_2 = setTimeout(function() {
        touching_x = false
        // store event details and do other things if timeout_2 not cleared by touch end
    }, 250);
}

touch_ended(event) { 
    if (touching_x==true) {
        clearTimeout(timeout_2);    
        // store event details and do some other things
    }
}

HTML:

<button ion-button type="button" (button_touch_started) = "touched($event)" (button_touch_ended) = "touch_ended($event)">Touch button</button>

Высокая точность (до мс) была бы важна, особенно для времени начала касания.

Любые советы приветствуются.


person gaspar    schedule 04.04.2018    source источник
comment
нужно ли вам событие touchstart и touchend. Если вам это нужно, в каком элементе вам нужно   -  person Abinesh Joyel    schedule 04.04.2018
comment
как объяснено, мне нужно и начало, и конец. это может быть любой обычный HTML-элемент, например кнопка, и в этом случае он будет выглядеть так: <button ion-button type="button" (button_touch_started)="touched()">Touch this button</button> (Или это имеет значение, если это, скажем, <div> вместо этого?)   -  person gaspar    schedule 04.04.2018
comment
я поставлю образец кода в ответ, пожалуйста, проверьте   -  person Abinesh Joyel    schedule 04.04.2018


Ответы (1)


Html Попробуйте либо div, либо кнопку

<div style="height:100%;width:100%" (touchstart)="touchstart($event)" (touchend)="touchend($event)">
  </div>
  <button ion-button large primary (touchstart)="touchstart($event);">touchstart</button>
<button ion-button large primary (touchend)="touchend($event);">touchend</button>

Ц

touchstart(event){
    console.log(event);
  }

  touchend(event){
    console.log(event);
  }
person Abinesh Joyel    schedule 04.04.2018
comment
где вы запускали в мобильном или браузере. сенсорные события будут работать на мобильных устройствах, а в браузере переключитесь на мобильное представление и проверьте, будут ли работать touchstart и touchend. /а> - person Abinesh Joyel; 04.04.2018
comment
Большое спасибо за сверхбыстрый и идеальный ответ. На самом деле я сделал в основном то же самое, но ваш ответ заставил меня провести еще несколько тестов, и я понял, что это действительно правильно, но просто это событие нормально не работает в браузере, на котором я все время тестировал. Но теперь я попробовал симуляцию мобильного устройства (developers.google.com/ web/tools/chrome-devtools/device-mode) — и прекрасно работает. Надеюсь, это поможет и другим. - person gaspar; 04.04.2018
comment
Для вашего комментария выше: да, я только что понял это тем временем, и поэтому я удалил свой предыдущий комментарий еще до того, как вы ответили. Но еще раз спасибо. - person gaspar; 04.04.2018