Skip to main content
giovanni_t
giovanni_t
Participant
November 18, 2016
Answered

Animate CC and touch issue on iPhone

  • November 18, 2016
  • 1 reply
  • 3256 views

Hello to all,

I am creating an animation with Animate CC.

I set an event handler with the following syntax:

this.myButton.addEventListener ("mousedown", function () {

     alert ("touched");

});

It works correctly, on deskyop, with:

- Chrome;

- FireFox;

- Safari;

- Microsoft IE

It works correctly also, on Android, with:

- Chrome Mobile;

But I can not make it work on an iPhone.

I also tried to insert the following code, and it does not change anything:

if (createjs.Touch.isSupported ()) {

     createjs.Touch.enable (internships);

}

However, if I create a simple canvas without going through Animate CC, also the "TouchStart" event works on iPhone ...

It's like if EaselJS interfere with touch events on iOS.

Can someone help me?

Thank you

John

This topic has been closed for replies.
Correct answer Colin Holgate

You have to add some things to the HTML head tag. Here are some example lines:

<meta name="viewport" content="user-scalable=no">

<style type="text/css"> 

* { 

    -webkit-touch-callout: none; 

    -webkit-user-select: none; 

  -webkit-tap-highlight-color: rgba(0,0,0,0);

} 

</style> 

And in a script tag add this:

document.ontouchmove = function(e){ e.preventDefault(); }

Those should help.

1 reply

Colin Holgate
Colin HolgateCorrect answer
Inspiring
November 18, 2016

You have to add some things to the HTML head tag. Here are some example lines:

<meta name="viewport" content="user-scalable=no">

<style type="text/css"> 

* { 

    -webkit-touch-callout: none; 

    -webkit-user-select: none; 

  -webkit-tap-highlight-color: rgba(0,0,0,0);

} 

</style> 

And in a script tag add this:

document.ontouchmove = function(e){ e.preventDefault(); }

Those should help.

giovanni_t
giovanni_tAuthor
Participant
November 18, 2016

Hello and thanks for answering.

I have an iPhone 4.

I just tried to add the code that you suggested but nothing has changed.

Except that no longer works scroll and zoon (even on android) ...

Any other suggestions?

By the way, is required the following code?

document.ontouchmove = function (e) {e.preventDefault (); }

Thanks again

Colin Holgate
Colin Holgate
Inspiring
November 18, 2016

Normally when doing Canvas on mobile you want the user to not be able to scroll, at least if your application requires dragging, and you don't want drags to cause the page to highlight. That's what those lines are for. The ontouchmove line is the one to stop the window from scrolling while you drag on the canvas.

It seems unusual that you're mouse enabling something called internships. That normally would be 'stage'.

Is your non-working page online somewhere?

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices