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
ktewes
(Kalle)
March 19, 2023, 8:23am
#2
Try this:
<style>
.disable-dbl-tap-zoom {
touch-action: manipulation;
}
</style>
Workes for me on iPhone...
2 Likes
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?
ktewes
(Kalle)
March 19, 2023, 9:50am
#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
MarkHunte
(Mark Hunte)
March 19, 2023, 10:10am
#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
MaxZieb
(Loves Hype)
March 19, 2023, 11:03am
#6
After processing your action you could add:
event.stopPropagation();
Maybe that helps.
The stopPropagation() method of the Event
interface prevents further propagation of the current event in the capturing and
bubbling phases. It does not, however, prevent any default behaviors from occurring; for
instance, clicks on links are...
1 Like
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.
ktewes
(Kalle)
March 23, 2023, 7:40am
#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
ktewes
(Kalle)
March 23, 2023, 8:14am
#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)
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?
jonathan
(Jonathan Deutsch)
March 23, 2023, 6:37pm
#11
What about unchecking Allow user scaling in the Mobile Options of the Document Inspector?