Having a nightmare with button taps

Ionic Framework ionic-v3
1

Hi All,

I’ve been having a nightmare implementing a PIN entry UI. The nightmare is that button clicks/presses/taps/tapables dont always register, especially if you are trying to type in your PIN really quickly. I’ve even got rid of all the buttons and replaced them with tappable divs.

Has anyone had any problems with multiple buttons on one page, and with quick button presses you miss button actions on some of them?

2

Hi All,

I managed to finally find this solution after a while

I was doing something like this:

<div class="pin_button" tappable (tap)="pin_9()" (press)="pin_9()">9</div>

Obviously with 10 of these for each number on the PIN entry

The problem was that when you tapped your PIN super fast, things were locking up and numbers were being missed.

Incredibly frustrating and I was shouting at Ionic severely.

The solution is super simple

You use (touchstart) rather than (tap) or (press).

If you do a performance recording on chrome you will see the consecutive events involved when a user taps on a screen.

I saw that pointerdown (https://www.w3.org/TR/pointerevents/#the-pointerdown-event) was severely lagging in Chrome.

(touchstart) is the best way to immediately execute anything you want based on presses.

I am going to see what difference it makes to my app to replace taps and presses throughout with (touchstart)

3

Just one further report, I have switched all clicks and taps to touchstart, and the app responds noticeably faster.

4

I have used this on my app, hope it will be useful to you as well.

5

Thanks vasanthb, I didnt think of emitting it like an event you have. You are still using clicks though, and from my recent experience this will be slower than (touchstart)

6

That’s great!! does it work on Ionic 3 too ?

7

Yes I am using Ionic 3. I want to migrate to 4 on this project, but i’ve had a look and it’s too involved for timescales. The only reason I wanted to upgrade was in the hope of UI responsiveness on screen touches, but this this solution seems to have resolved that. In my opinion it’s as responsive as a native app now