Disable click/tap events while scrolling (horizontal)

Ionic Framework ionic-v3
1

I have horizontal list of ion-cards in ion-scroll. While sliding through them on iOS you very often accidentally fire click event on the card when you just want to slide.

Is there a way to disable click events while scrolling (maybe even few ms after scrolling stops)?

Thanks :slight_smile:

Source example:

        <ion-scroll scrollX="true">
			<ion-row>
				<ion-col *ngFor="let saleProduct of data.sales" (click)="productDetail(saleProduct)" tappable>
					<ion-card>
						<div class="image-wrapper">
							<img src="...">
						</div>
						<ion-item>
							<p>...</p>
						</ion-item>
					</ion-card>
				</ion-col>
			</ion-row>
		</ion-scroll>
1 Like
2

We found out that the ion-card was to problem here.

3

I’m having a similar issue. Can you expound on your findings?

4

I’m not sure if ion-card was the problem, however removing tappable from the elements helped a bit. Now we have opposite problem when it is too difficult to click on the elements. So I don’t have a solution yet. So annoying.

Maybe you will have more luck after reading this and related issues https://github.com/driftyco/ionic/issues/1438. Some people there seem to have solutions. Good luck

5

I was able to workaround my issue by changing the (click) event to a (tap) event instead…

1 Like