Develop Reference

PIXI - disabled preventDefault touch events not working on Android devices

Since I´m working on a project where I need to be able to drag objects around my canvas but also to scroll the entire page by dragging the actual canvas 'background' behind my PIXI Sprites, i followed the findings of this guy here:
https://github.com/pixijs/pixi.js/issues/2483 :
By default, the Pixi canvas/display-area cannot be used to scroll the
webpage that contains it. Which is important on touch screens. (eg. If
you use the rest of the web-page to pinch-zoom into the Pixi canvas,
you can become trapped and unable to zoom back out (or pan away),
because there's no non-Pixi-canvas area of the page to "grab" with
your pinch gesture).
To enable this functionality, I use autoPreventDefault. But this comes
with some undesirable side-effects, like scroll/pinch-zoom actions
over the canvas registering "taps" or clicks in a way that doesn't
make sense. (ie. I'm attempting to zoom or scroll the outer page at
that point, not interact with the Pixi canvas)
To work around that, I modify and compile my own custom version of
Pixi where I can apply preventDefault in a more granular way...
To get page-scrolling functionality it seems I only need to
preventDefault in the InteractionManager.prototype.onTouchEnd
function. Whereas autoPreventDefault will also preventDefault on 3
other events. (onMouseDown, onTouchMove, onTouchStart).
Leaving autoPreventDefault = false and applying preventDefault only to
onTouchEnd, gives me the functionality I need. But it'd be nice to not
have to customize and rebuild Pixi in this way every release. (Sorry
if there's something else I'm missing here; I don't completely
understand the event system in Pixi, or what else to do about this
scroll-touch problem)
So i disabled e.preventDefault() on 'onTouchStart' and on 'onMouseMove' but left it as is on 'onTouchEnd'
This works perfect on IOS devices but not on Android, the only exception being a Samsung A7 using Adblock browser (fails on Chrome).
Would really appreciate some help on this.
TLDR:
Disabling PIXI´s e.preventDefault on onTouchStart and onMouseMove works on IOS devices and lets me scroll the page by draggin my canvas around but not on Android devices.

My solution for that was to use
renderer.plugins.interaction.autoPreventDefault = false
This should work on iOS and Android.
Docs for autoPreventDefault reads:
Should the manager automatically prevent default browser actions.
Using PIXI 4.5.6.
Take a look at the docs:
http://pixijs.download/dev/docs/PIXI.CanvasRenderer.html#plugins
http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html

Using renderer.plugins.interaction.autoPreventDefault=true should do the trick.

Android Cordova canvas app lags only for specific device running 2.3.6 Gingerbread when no touch events are being fired

My app uses HTML5 canvas and uses Cordova to build an .apk file.
I have tested my app on 5 devices running varying versions of Android OS and of varying hardware capabilities. The only one which lagged was a Samsung Galaxy Ace 2, running Android 2.3.6 Gingerbread. I believe it is an OS issue because phones tested with similar/worse hardware do not lag.
When the screen is touched and remains touched, the lag is greatly reduced. I noticed that pixels seem smoothed or anti-aliased when the screen is not touched but more pixelated when the screen is touched, I believe this to be causing the lag. I prefer less pretty with no lag than the opposite. My javascript does not cause this to happen, and so I am stuck on how to resolve it.
The following did not solve the problem:
context.imageSmoothingEnabled = false;
and using CSS image-rendering settings did not help.
The javascript has touchstart, touchend and touchmove event listeners so I attempted to hack my way by faking the touchmove event even if the user was not touching the screen, although I couldn't get this working and it's not a very elegant solution anyway.
I have had this problem for weeks and want my apps to work on all devices.
Does anyone have any suggestions?
Thanks, George.

Disabling swipe right to previous page on Windows Phone

I'm trying to use http://wipetouch.codeplex.com/ to implement swiping on a Meteor app to shift between templates in Iron Router.
It works beautifully on iOS and Android but on Windows Phone, the OS' native swipe gesture (swiping right in the browser moves one page back in history) interferes with the user's swiping action.
Is there any way I can disable this?
Also which other platforms have similar functionality which would prevent the user from swiping in the web app effectively?
As an example, this app also uses the same library to implement swipe gestures.
Note: Using touch-action: none on the body tag does not work.

I encountered the same problem on a little web application : it which was a scratch game, where the player had to swipe the finger all over the "scratchable" zone to discover what he had won.
The game was supposed to run on Windows 8.1 tablets, with IE10 on it.
We put in the css this snippet :
*{
touch-action: none;
}
The result is to completely deactivate any touch events on the app (including the swipe backward / forward).
But we had to reactivate the touch event only on the scratch zone, to allow the player to play :)
For this we had to add this :
#playzone{
touch-action: chained;
}
The app still works perfectly, both on IE10 on tablets but also on Windows Phone 8.1.
(please forgive my English, it's not my mother tongue)
EDIT : After having tested more on IE, it seems that adding the touch-action:none; on the html element is enough to achieve what the OP wanted.

Number of touchmove events severely reduced on Android 2.3.3

I am currently working on the redesign of a website following the responsive design + mobile first approach.
I am trying to detect swipe events using JS on touch-enabled devices. For this purpose, I am using the following code:
document.addEventListener ('touchstart', function(event) {
//Get initial finger coords
}, false);
document.addEventListener ('touchmove', function(event) {
//Update final finger coords
}, false);
document.addEventListener ('touchend', function(event) {
//Compare initial and final coords, trigger swipe events if necessary
}, false);
I have tested this code on an iPad 1, an iPhone 4 and several devices running Android 2.2.1, and the result when I drag my finger on the screen is what I am expecting: the touchmove event fires several times (it can easily rise up to a hundred when doing a long gesture).
The problem comes when I test it on an Android 2.3.3 device (I'm using a Samsung Galaxy S2). Using its native broswer, the amount of touchmove events is reduced to only 1 (or rarely 2).
Am I doing something wrong or is it supposed to behave like that? Has anybody found the same problem? I was unable to find documentation about the behaviour of touchmove events in this version of Andriod.
You can test it here (using a touch-enabled device): http://jsfiddle.net/xs5BG/embedded/result/

It seems that galaxy S2 doesn't fire the touchmove after the scrolling starts to work. If you do a preventDefault it fires the events as expected.

Testing your jsFiddle example with my HTC Desire Z (running 2.3.3) i get many more than just one touchmove event - as desired. So i am unable to reproduce your actual problem with this device, although on the same API Level :( Interestingly enough your code also shows the problem that i am experiencing on my current project: The first touchmove event seems to have some kind of a threshold:
Putting the finger down and only moving a tiny bit will give 0 touchmove events... once over the threshold it will trigger touchmove events in intervals of milliseconds as it then recognises each and every pixel distance of a move (like it should do). Maybe this could be related to your phenomenon, respectively do you see this on your 2.3.3 device as well?

On many android versions if you don't preventDefault on touchstart the Android device will go into default scrolling mode and stops sending touch events to webview. So you would need to
document.addEventListener ('touchstart', function(event) {
event.preventDefault();
}, false);
Now all the touch events will fire, but default scrolling will be disabled.
There is a shim to overcome this issue that emulates a swipe gesture https://github.com/TNT-RoX/android-swipe-shim

React to HTML5 mouse events on FireFox and iPod (Safari?)

I am updating my scrolling game engine to output HTML5 code for the scrolling maps it generates, so that it can be used not only as a (somewhat-platform-specific) complete game creator, but also as a cross-platform HTML5 scrolling map editor. I got past the challenge of supporting the graphic tinting as described in my earlier question. And I have a nice sample running at http://sgdk2.enigmadream.com/ben/. However I have noticed that the mouse interaction for scrolling the map does not work on FireFox or on an iPod. It looks like iPod may use different events (ontouch etc) according to Native HTML5 Drag and Drop in Mobile Safari (iPad, iPod, iPhone)?. And that doesn't explain why FireFox wouldn't react. Isn't there a more universal way to support mouse or touch interaction? Do the touch events also work for mouse, or are they specific to touch? How would you recommend interacting with this scrolling map in the most cross-platform compatible way?

you need to correctly retrieve your srcElement
var srcEl = e.srcElement? e.srcElement : e.target;
try it
P.S.: see targets