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
Try this:
<style>
.disable-dbl-tap-zoom {
touch-action: manipulation;
}
</style>
Workes for me on iPhone...
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?
Yep! And of course you have to assign the class to the element(s) where you want to avoid the double-click.
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
After processing your action you could add:
event.stopPropagation();
Maybe that helps.
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.
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)
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?
What about unchecking Allow user scaling in the Mobile Options of the Document Inspector?
Should the world really be that simple? 
Works for me and my iPhone...
I'm not sure if this is working or not.
Here's my current build of the project:
Nope, unfortunately it's not working for me. What exactly did you change?
Interesting, it seems that Hype's Allow user scaling checkbox now does not have any effect in Mobile Safari, but will still work for home page web apps (and also embedded, like in Hype Reflect).
Instead I think it may be wise to go back to the top of the thread for suggestions (or to this stack overflow response that I was looking at); from my testing a solution would be to add this to your Head HTML:
<style>
body {
touch-action: pan-x pan-y;
}
</style>
Note that your document already has style tags but erroneously some javascript code in it. Does that help?
I've been fiddling around so much I have no idea now ! 
Thanks for the advice Jonathan!
I don't know where to look for the Javascript code? It could be a relic going back to when I tried to convert a project from Flash to HTML5 a decade ago.
Where can I see and or eliminate the unnecessary code?
Cheers.
Go to the Document Inspector (command-1) and then click Edit Head HTML…. From there you should be able to eliminate the incorrect code and try the style from above.