Can double tap be disabled for mobile devices?

Animation
#1

G'day all,

I have an interactive musical keyboard project which works well on all platforms but if a user taps too quickly on mobile the screen zooms.

Can this be disabled to stop people from tapping and zooming accidentally.

I did some preliminary searching for an answer here but maybe I'm not using the right keywords?

Thanks for reading.

Tony

#2

Try this:

<style>

.disable-dbl-tap-zoom {
  touch-action: manipulation;
}
</style>

Workes for me on iPhone...

2 Likes
#3

Thanks for the reply.

I tried but it doesn't seem to work on Android.

iPad seems ok though.

Maybe I put it in the wrong place. The code goes in here right?

Screen Shot 2023-03-19 at 8.30.13 pm

#4

Yep! And of course you have to assign the class to the element(s) where you want to avoid the double-click.

1 Like
#5

If its working on iPad then you already have it setup correctly.

May be check you browser version on the Android

List at bottom of page

1 Like
#6

After processing your action you could add:

event.stopPropagation();

Maybe that helps.

1 Like
#7

I think I'm overloaded with information. I'm trying to translate the terminology being used in a practical sense but not getting a result.

i.e. I still have the double tap on Android issue. iOS seems to be ok.

#8

What about something like this?

Add a class to the Head-Html:

<style>
.disabled, .disabled * {
	pointer-events: none !important;
}
</style>

Sorry, there was a typing error in the style definition. It´s correct now...

Function on button:

	hypeDocument.startTimelineNamed('timelineName', hypeDocument.kDirectionForward) // or what ever you want to do
	
	element.classList.add("disabled");
	
		setTimeout(function(){
		
			element.classList.remove("disabled");
	
		}, 500);

Works for me on iPhone. You might test this on your Android device...

avoidDoubleClick.zip (15.1 KB)

1 Like
#9

Of course, what you could do in addition:

Put the 'preventDoubleClick'-part into a separate function. This way you have to write that code only once (given you named that function 'preventDoubleClick') you would call it this way:

hypeDocument.startTimelineNamed('timelineName', hypeDocument.kDirectionForward); // or whatever you want to do //

hypeDocument.functions().preventDoubleClick(hypeDocument, element, event); // call the function

avoidDoubleClick_2.zip (15.4 KB)

#10

Thanks for the replies and suggestions!

I thought there might be a global project file setting to disable fast or double tapping? Does the one you showed here do that by itself?

Do all interactive items in my project need to have additional code lines to stop the zoom functionality?

#11

What about unchecking Allow user scaling in the Mobile Options of the Document Inspector?