3

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
gaspar
  • 898
  • 1
  • 13
  • 26
  • whether you need touchstart and touchend event. If you need this in which element you need – Abinesh Joyel Apr 04 '18 at 12:03
  • as explained, i need both start and end. it could be for any regular HTML element, for example a button, in which case it would look like this: `` (Or does it make a difference if it is, say, a `
    ` instead?)
     – gaspar Apr 04 '18 at 12:11
  • i will put a code sample in answer pls check – Abinesh Joyel Apr 04 '18 at 12:16

1 Answers1

10

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);
  }
Abinesh Joyel
  • 2,043
  • 2
  • 13
  • 18
  • 1
    where did you run in mobile or browser. touch events will work in mobile devices and in browser switch to mobile view and check touchstart and touchend will work check this [demo](https://ionic-k3gbhe.stackblitz.io/) – Abinesh Joyel Apr 04 '18 at 12:59
  • Thanks very much for the superfast and perfect reply. Actually I did basically the same but your reply made me do some more testing and I realized that this is indeed correct, but simply this event does not normally work on a browser on which I've been testing all the time. But now I tried a mobile device simulation (https://developers.google.com/web/tools/chrome-devtools/device-mode/) - and it works beautifully. Hope this will help others too though. – gaspar Apr 04 '18 at 13:13
  • For your comment above: yes, I just realized this in the meantime, and so I deleted my previous comment already before you replied. But thanks again. – gaspar Apr 04 '18 at 13:17
  • Would you please expand your demo and show how to move a floating div with touch. I am having hard time trying to move a div with an id, thank you. For example, .clientX is undefined. https://stackblitz.com/edit/ionic-k3gbhe?file=pages%2Fhome%2Fhome.html – Meryan Mar 01 '23 at 06:21