touchstart and touchend events in ionic 3

Question

I'm looking for a separate event handler in Ionic 3 for starting and ending a touch on an HTML element on a mobile app.

I found many related and solved questions, but none for Ionic 3, which currently only seems to support "tap, press, pan, swipe, rotate, and pinch" (https://ionicframework.com/docs/components/#gestures). And none of these seem to provide a "handler" at the start, but only at the end. I see that then they do give the data of the touch duration (deltaTime), but by that point it's no use for my purposes.

For more context, what I want is to clear a related timeout in the exact moment when the screen is first touched on an element, and then see whether or not this touch on the same specific element ends within a certain time (e.g. 250 ms, so that it can be evaluated as a "tap").

For example something like this:

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>

High precision (down to ms) would be important especially for the touch start time.

Any advice is appreciated.

Answer 1

Html Try either div or button

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

Ts

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

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