Sign in to follow this  
botmaster

No TouchEvents Error

Recommended Posts

This code throws error: ReferenceError: "TouchEvent is not defined" in PIXI 4.8.0

And then no pointer events are working. This happens in Edge, FireFox, Safari with no touchscreen

Apparently supportsTouchEvents passes even though no TouchEvent definition is present.


 
	InteractionManager.prototype.normalizeToPointerData = function normalizeToPointerData(event) {
        var normalizedEvents = [];
	        if (this.supportsTouchEvents && event instanceof TouchEvent) {
            for (var i = 0, li = event.changedTouches.length; i < li; i++) {
                var touch = event.changedTouches[i];
	                if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0;
                if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0;
                if (typeof touch.isPrimary === 'undefined') {
                    touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart';
                }
                if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1;
                if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1;
                if (typeof touch.tiltX === 'undefined') touch.tiltX = 0;
                if (typeof touch.tiltY === 'undefined') touch.tiltY = 0;
                if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch';
                if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0;
                if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5;
                touch.twist = 0;
                touch.tangentialPressure = 0;
                // TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven
                // support, and the fill ins are not quite the same
                // offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top
                // left is not 0,0 on the page
                if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX;
                if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY;
	                // mark the touch as normalized, just so that we know we did it
                touch.isNormalized = true;
	                normalizedEvents.push(touch);
            }
        }
	

 

Any workarounds? Or is it fixed in newest version?

Share this post


Link to post
Share on other sites

There's a few "ugly" override I have to make with pixi and this just adds another one. Yep I use a try/catch so my code can recover and move on then I just use the boolean. Without this this pixi code will fail and no interaction will occur at all on:

- desktop

- no touchscreen

- with safari, firefox, edge, IE

- only chrome manages to provide a touchevent.

 

PIXI.interaction.InteractionManager.prototype['normalizeToPointerData'] = function normalizeToPointerData(event:any) {
var normalizedEvents = [];
var hastouchevent = true;
try
{
new TouchEvent("", null)
}
catch(e)
{
hastouchevent = false;
}
if (hastouchevent) {
for (var i = 0, li = event.changedTouches.length; i < li; i++) {
var touch:any = event.changedTouches[i];
 
if (typeof touch.button === 'undefined') touch.button = event.touches.length ? 1 : 0;
if (typeof touch.buttons === 'undefined') touch.buttons = event.touches.length ? 1 : 0;
if (typeof touch.isPrimary === 'undefined') {
touch.isPrimary = event.touches.length === 1 && event.type === 'touchstart';
}
if (typeof touch.width === 'undefined') touch.width = touch.radiusX || 1;
if (typeof touch.height === 'undefined') touch.height = touch.radiusY || 1;
if (typeof touch.tiltX === 'undefined') touch.tiltX = 0;
if (typeof touch.tiltY === 'undefined') touch.tiltY = 0;
if (typeof touch.pointerType === 'undefined') touch.pointerType = 'touch';
if (typeof touch.pointerId === 'undefined') touch.pointerId = touch.identifier || 0;
if (typeof touch.pressure === 'undefined') touch.pressure = touch.force || 0.5;
touch.twist = 0;
touch.tangentialPressure = 0;
// TODO: Remove these, as layerX/Y is not a standard, is deprecated, has uneven
// support, and the fill ins are not quite the same
// offsetX/Y might be okay, but is not the same as clientX/Y when the canvas's top
// left is not 0,0 on the page
if (typeof touch.layerX === 'undefined') touch.layerX = touch.offsetX = touch.clientX;
if (typeof touch.layerY === 'undefined') touch.layerY = touch.offsetY = touch.clientY;
 
// mark the touch as normalized, just so that we know we did it
touch.isNormalized = true;
 
normalizedEvents.push(touch);
}
}
// apparently PointerEvent subclasses MouseEvent, so yay
else if (event instanceof MouseEvent && (!this.supportsPointerEvents || !(event instanceof window['PointerEvent']))) {
 
var mouseevent:any = event
if (typeof mouseevent.isPrimary === 'undefined') mouseevent.isPrimary = true;
if (typeof mouseevent.width === 'undefined') mouseevent.width = 1;
if (typeof mouseevent.height === 'undefined') mouseevent.height = 1;
if (typeof mouseevent.tiltX === 'undefined') mouseevent.tiltX = 0;
if (typeof mouseevent.tiltY === 'undefined') mouseevent.tiltY = 0;
if (typeof mouseevent.pointerType === 'undefined') mouseevent.pointerType = 'mouse';
if (typeof mouseevent.pointerId === 'undefined') mouseevent.pointerId = 1;
if (typeof mouseevent.pressure === 'undefined') mouseevent.pressure = 0.5;
mouseevent.twist = 0;
mouseevent.tangentialPressure = 0;
 
// mark the mouse event as normalized, just so that we know we did it
mouseevent.isNormalized = true;
 
normalizedEvents.push(event);
} else {
normalizedEvents.push(event);
}
 
return normalizedEvents;
};

Share this post


Link to post
Share on other sites

Bumping this since that does seem quite a huge bug in PIXI and yet nobody is responding. 

Again: On a computer with NO TOUCHSCREEN, on some browsers, PIXI generates a nasty TouchEvent error and NO user interaction can happen after that. 

The fix I posted is working for most browsers except Safari where no hover event are working. 

Would be nice if someone would break the silence on this.

 

Share this post


Link to post
Share on other sites

@botmaster Could you create a little jsfiddle please demonstrating the error you are describing, and I'll take a look. Games I make using PIXI are tested against pretty much everything, and we've never seen anything like this before.

It'd also be useful to know what kind of desktop device you are playing on.... or does it go wrong on a range of devices?

Thanks!

Share this post


Link to post
Share on other sites

I don't think jsfiddle would help as this is not related directly to code but instead to browser support.

Here is the situation on all the computer in my company (around 50 MACs/100 PCs):

WIN10 17134.228

MAC High Sierra 10.13.6 

NO touchscreen.

(of course this problem DOES NOT apply to mobile or touchscreen device)

 

IE 11.228.17134.0 : 'TouchEvent' is undefined (PIXI 4.8.0 causes an error) , PointerEvent: ok, MouseEvent: ok

EDGE 42.17134.0: TouchEvent: ok, PointerEvent: ok, MouseEvent: ok

Chrome 69.0.34497.100: TouchEvent: ok, PointerEvent: ok, MouseEvent: ok

FireFox 62.0.2 'TouchEvent' is undefined (PIXI 8.2.0 causes an error) , PointerEvent: ok, MouseEvent: ok

Safari 12.0 (13606.2.11)  'TouchEvent' is undefined (PIXI 4.8.0 causes an error) , PointerEvent is undefined (This is handled by PIXI but when there's no TouchEvent there's no HOVER insteraction) , MouseEvent: ok

 

1. The original PIXI code (4.8.0) does assume the existence of TouchEvent definition but that definition is not present in many cases which causes error, which in turn causes interaction to completely stop working.

2. My temporary fix does handle the error and this restores interaction for IE and FireFox but NOT for Safari where both TocuhEvent and PointerEvent don't exist.

 

So my next fix (since the one I posted does not work in safari) will handle TouchEvent check the SAME WAY PIXI does handle PionterEvent check but will have to add the case where BOTH don't exist.

 

 

Share this post


Link to post
Share on other sites

There is something bizarre in your setup that isn't quite right. Because, for you, PIXI is just entirely broken. But it's not broken for anyone else

I've just got the testers here to test on IE and Firefox on Windows 7, IE and Firefox on Windows 10, Safari on a mac... and it all works. And they all work because they do not have 'window.ontouchstart', and thus 'this.supportsTouchEvents' becomes false, thus there is no issue on the if statement in question.

So the first port of all... load up a fresh instance of IE, go to about:blank, and then in the console, type in 'window.ontouchstart'. I'd expect it to return 'undefined'

image.png.9cfab8b0b454006f2c3941dc30c7528a.png

If that is the same for you, the question becomes... why does your setup have 'ontouchstart' defined for ALL browsers, no matter what, when browser themselves do not have that property? Which makes me think somewhere in your code base is adding it. Perhaps a polyfill?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.